@storybook/addon-measure - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1--canary.4826550.0

dist/box-model/canvas.js

@@ -9,8 +9,9 @@ "use strict";
 exports.draw = draw;
+exports.rescale = rescale;
 exports.destroy = destroy;
 
 function getDocumentWidthAndHeight() {
-  var body = document.body;
-  var height = Math.max(body.scrollHeight, body.offsetHeight);
-  var width = Math.max(body.scrollWidth, body.offsetWidth);
+  var container = document.documentElement;
+  var height = Math.max(container.scrollHeight, container.offsetHeight);
+  var width = Math.max(container.scrollWidth, container.offsetWidth);
   return {
@@ -23,2 +24,6 @@ width: width,
 function createCanvas() {
+  var canvas = document.createElement("canvas");
+  canvas.id = "storybook-addon-measure";
+  var context = canvas.getContext("2d"); // Set canvas width & height
+
   var _getDocumentWidthAndH = getDocumentWidthAndHeight(),
@@ -28,6 +33,2 @@ width = _getDocumentWidthAndH.width,
 
-  var canvas = document.createElement("canvas");
-  canvas.id = "storybook-addon-measure";
-  var context = canvas.getContext("2d"); // Set canvas width & height
-
   setCanvasWidthAndHeight(canvas, context, {
@@ -81,10 +82,24 @@ width: width,
 function draw(callback) {
-  var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   clear();
+  callback(state.context);
+}
 
-  if (scale) {
-    setCanvasWidthAndHeight(state.canvas, state.context);
-  }
+function rescale() {
+  // First reset so that the canvas size doesn't impact the container size
+  setCanvasWidthAndHeight(state.canvas, state.context, {
+    width: 0,
+    height: 0
+  });
 
-  callback(state.context);
+  var _getDocumentWidthAndH2 = getDocumentWidthAndHeight(),
+      width = _getDocumentWidthAndH2.width,
+      height = _getDocumentWidthAndH2.height;
+
+  setCanvasWidthAndHeight(state.canvas, state.context, {
+    width: width,
+    height: height
+  }); // update state
+
+  state.width = width;
+  state.height = height;
 }
@@ -91,0 +106,0 @@

dist/box-model/visualizer.js

@@ -30,3 +30,3 @@ "use strict";
 };
-var SMALL_NODE_SIZE = 40;
+var SMALL_NODE_SIZE = 30;
 
@@ -277,3 +277,3 @@ function pxToNumber(px) {
       var contentLabels = drawContent(context, dimensions);
-      var externalLabels = dimensions.width <= SMALL_NODE_SIZE * 2 || dimensions.height <= SMALL_NODE_SIZE;
+      var externalLabels = dimensions.width <= SMALL_NODE_SIZE * 3 || dimensions.height <= SMALL_NODE_SIZE;
       (0, _labels.labelStacks)(context, dimensions, [].concat(_toConsumableArray(contentLabels), _toConsumableArray(paddingLabels), _toConsumableArray(borderLabels), _toConsumableArray(marginLabels)), externalLabels);
@@ -284,4 +284,4 @@ }
 
-function drawSelectedElement(element, scale) {
-  (0, _canvas.draw)(drawBoxModel(element), scale);
+function drawSelectedElement(element) {
+  (0, _canvas.draw)(drawBoxModel(element));
 }

dist/useHotKey.js

@@ -21,6 +21,8 @@ "use strict";
 
-  var onKeyUp = function onKeyUp() {
-    updateGlobals({
-      measureEnabled: false
-    });
+  var onKeyUp = function onKeyUp(event) {
+    if (event.key === "Alt") {
+      updateGlobals({
+        measureEnabled: false
+      });
+    }
   };
@@ -27,0 +29,0 @@

dist/util.js

@@ -12,3 +12,3 @@ "use strict";
   var crawlShadows = function crawlShadows(node) {
-    if (node.shadowRoot) {
+    if (node && node.shadowRoot) {
       var nestedElement = node.shadowRoot.elementFromPoint(x, y); // Nested node is same as the root one
@@ -15,0 +15,0 @@

dist/withMeasure.js

@@ -32,3 +32,3 @@ "use strict";
 
-var withMeasure = function withMeasure(StoryFn) {
+var withMeasure = function withMeasure(StoryFn, context) {
   var _useGlobals = (0, _addons.useGlobals)(),
@@ -53,3 +53,3 @@ _useGlobals2 = _slicedToArray(_useGlobals, 2),
       window.requestAnimationFrame(function () {
-        (0, _visualizer.drawSelectedElement)(nodeAtPointerRef, true);
+        (0, _canvas.rescale)();
       });
@@ -61,3 +61,3 @@ };
       document.addEventListener("mouseover", onMouseOver);
-      document.addEventListener("resize", onResize);
+      window.addEventListener("resize", onResize);
     }
@@ -67,3 +67,3 @@
       document.removeEventListener("mouseover", onMouseOver);
-      document.removeEventListener("resize", onResize);
+      window.removeEventListener("resize", onResize);
       (0, _canvas.destroy)();
@@ -70,0 +70,0 @@ };

package.json

 {
   "name": "@storybook/addon-measure",
-  "version": "1.1.0",
+  "version": "1.1.1--canary.4826550.0",
   "description": "Inspect layouts by visualizing the box model",
@@ -5,0 +5,0 @@ "keywords": [

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

42991

increased by1.01%

Lines of code

867

increased by1.76%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes