@storybook/addon-measure - npm Package Compare versions

Comparing version 0.0.0-pr-26243-sha-393e9350 to 0.0.0-pr-26243-sha-c7b1761e

dist/manager.js

 import React, { useCallback, useEffect } from 'react';
-import { addons, types, useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
+import { addons, types, useGlobals, useStorybookApi } from 'storybook/internal/manager-api';
+import { IconButton } from 'storybook/internal/components';
 import { RulerIcon } from '@storybook/icons';
 
 var ADDON_ID="storybook/measure-addon",TOOL_ID=`${ADDON_ID}/tool`;var Tool=()=>{let[globals,updateGlobals]=useGlobals(),{measureEnabled}=globals,api=useStorybookApi(),toggleMeasure=useCallback(()=>updateGlobals({measureEnabled:!measureEnabled}),[updateGlobals,measureEnabled]);return useEffect(()=>{api.setAddonShortcut(ADDON_ID,{label:"Toggle Measure [M]",defaultShortcut:["M"],actionName:"measure",showInMenu:!1,action:toggleMeasure});},[toggleMeasure,api]),React.createElement(IconButton,{key:TOOL_ID,active:measureEnabled,title:"Enable measure",onClick:toggleMeasure},React.createElement(RulerIcon,null))};addons.register(ADDON_ID,()=>{addons.add(TOOL_ID,{type:types.TOOL,title:"Measure",match:({viewMode,tabId})=>viewMode==="story"&&!tabId,render:()=>React.createElement(Tool,null)});});

dist/preview.js

@@ -1,7 +0,14 @@
-import { useEffect } from '@storybook/preview-api';
-import { global } from '@storybook/global';
-import invariant from 'tiny-invariant';
+'use strict';
 
-function getDocumentWidthAndHeight(){let container=global.document.documentElement,height=Math.max(container.scrollHeight,container.offsetHeight);return {width:Math.max(container.scrollWidth,container.offsetWidth),height}}function createCanvas(){let canvas=global.document.createElement("canvas");canvas.id="storybook-addon-measure";let context=canvas.getContext("2d");invariant(context!=null);let{width,height}=getDocumentWidthAndHeight();return setCanvasWidthAndHeight(canvas,context,{width,height}),canvas.style.position="absolute",canvas.style.left="0",canvas.style.top="0",canvas.style.zIndex="2147483647",canvas.style.pointerEvents="none",global.document.body.appendChild(canvas),{canvas,context,width,height}}function setCanvasWidthAndHeight(canvas,context,{width,height}){canvas.style.width=`${width}px`,canvas.style.height=`${height}px`;let scale=global.window.devicePixelRatio;canvas.width=Math.floor(width*scale),canvas.height=Math.floor(height*scale),context.scale(scale,scale);}var state={};function init(){state.canvas||(state=createCanvas());}function clear(){state.context&&state.context.clearRect(0,0,state.width??0,state.height??0);}function draw(callback){clear(),callback(state.context);}function rescale(){invariant(state.canvas,"Canvas should exist in the state."),invariant(state.context,"Context should exist in the state."),setCanvasWidthAndHeight(state.canvas,state.context,{width:0,height:0});let{width,height}=getDocumentWidthAndHeight();setCanvasWidthAndHeight(state.canvas,state.context,{width,height}),state.width=width,state.height=height;}function destroy(){state.canvas&&(clear(),state.canvas.parentNode?.removeChild(state.canvas),state={});}var colors={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},labelPadding=6;function roundedRect(context,{x,y,w,h,r}){x=x-w/2,y=y-h/2,w<2*r&&(r=w/2),h<2*r&&(r=h/2),context.beginPath(),context.moveTo(x+r,y),context.arcTo(x+w,y,x+w,y+h,r),context.arcTo(x+w,y+h,x,y+h,r),context.arcTo(x,y+h,x,y,r),context.arcTo(x,y,x+w,y,r),context.closePath();}function positionCoordinate(position,{padding,border,width,height,top,left}){let contentWidth=width-border.left-border.right-padding.left-padding.right,contentHeight=height-padding.top-padding.bottom-border.top-border.bottom,x=left+border.left+padding.left,y=top+border.top+padding.top;return position==="top"?x+=contentWidth/2:position==="right"?(x+=contentWidth,y+=contentHeight/2):position==="bottom"?(x+=contentWidth/2,y+=contentHeight):position==="left"?y+=contentHeight/2:position==="center"&&(x+=contentWidth/2,y+=contentHeight/2),{x,y}}function offset(type,position,{margin,border,padding},labelPaddingSize,external){let shift=dir=>0,offsetX=0,offsetY=0,locationMultiplier=external?1:.5,labelPaddingShift=external?labelPaddingSize*2:0;return type==="padding"?shift=dir=>padding[dir]*locationMultiplier+labelPaddingShift:type==="border"?shift=dir=>padding[dir]+border[dir]*locationMultiplier+labelPaddingShift:type==="margin"&&(shift=dir=>padding[dir]+border[dir]+margin[dir]*locationMultiplier+labelPaddingShift),position==="top"?offsetY=-shift("top"):position==="right"?offsetX=shift("right"):position==="bottom"?offsetY=shift("bottom"):position==="left"&&(offsetX=-shift("left")),{offsetX,offsetY}}function collide(a,b){return Math.abs(a.x-b.x)<Math.abs(a.w+b.w)/2&&Math.abs(a.y-b.y)<Math.abs(a.h+b.h)/2}function overlapAdjustment(position,currentRect,prevRect){return position==="top"?currentRect.y=prevRect.y-prevRect.h-labelPadding:position==="right"?currentRect.x=prevRect.x+prevRect.w/2+labelPadding+currentRect.w/2:position==="bottom"?currentRect.y=prevRect.y+prevRect.h+labelPadding:position==="left"&&(currentRect.x=prevRect.x-prevRect.w/2-labelPadding-currentRect.w/2),{x:currentRect.x,y:currentRect.y}}function textWithRect(context,type,{x,y,w,h},text){return roundedRect(context,{x,y,w,h,r:3}),context.fillStyle=`${colors[type]}dd`,context.fill(),context.strokeStyle=colors[type],context.stroke(),context.fillStyle=colors.text,context.fillText(text,x,y),roundedRect(context,{x,y,w,h,r:3}),context.fillStyle=`${colors[type]}dd`,context.fill(),context.strokeStyle=colors[type],context.stroke(),context.fillStyle=colors.text,context.fillText(text,x,y),{x,y,w,h}}function configureText(context,text){context.font="600 12px monospace",context.textBaseline="middle",context.textAlign="center";let metrics=context.measureText(text),actualHeight=metrics.actualBoundingBoxAscent+metrics.actualBoundingBoxDescent,w=metrics.width+labelPadding*2,h=actualHeight+labelPadding*2;return {w,h}}function drawLabel(context,measurements,{type,position="center",text},prevRect,external=!1){let{x,y}=positionCoordinate(position,measurements),{offsetX,offsetY}=offset(type,position,measurements,labelPadding+1,external);x+=offsetX,y+=offsetY;let{w,h}=configureText(context,text);if(prevRect&&collide({x,y,w,h},prevRect)){let adjusted=overlapAdjustment(position,{x,y,w,h},prevRect);x=adjusted.x,y=adjusted.y;}return textWithRect(context,type,{x,y,w,h},text)}function floatingOffset(alignment,{w,h}){let deltaW=w*.5+labelPadding,deltaH=h*.5+labelPadding;return {offsetX:(alignment.x==="left"?-1:1)*deltaW,offsetY:(alignment.y==="top"?-1:1)*deltaH}}function drawFloatingLabel(context,measurements,{type,text}){let{floatingAlignment:floatingAlignment2,extremities}=measurements,x=extremities[floatingAlignment2.x],y=extremities[floatingAlignment2.y],{w,h}=configureText(context,text),{offsetX,offsetY}=floatingOffset(floatingAlignment2,{w,h});return x+=offsetX,y+=offsetY,textWithRect(context,type,{x,y,w,h},text)}function drawStack(context,measurements,stack,external){let rects=[];stack.forEach((l,idx)=>{let rect=external&&l.position==="center"?drawFloatingLabel(context,measurements,l):drawLabel(context,measurements,l,rects[idx-1],external);rects[idx]=rect;});}function labelStacks(context,measurements,labels,externalLabels){let stacks=labels.reduce((acc,l)=>(Object.prototype.hasOwnProperty.call(acc,l.position)||(acc[l.position]=[]),acc[l.position]?.push(l),acc),{});stacks.top&&drawStack(context,measurements,stacks.top,externalLabels),stacks.right&&drawStack(context,measurements,stacks.right,externalLabels),stacks.bottom&&drawStack(context,measurements,stacks.bottom,externalLabels),stacks.left&&drawStack(context,measurements,stacks.left,externalLabels),stacks.center&&drawStack(context,measurements,stacks.center,externalLabels);}var colors2={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},SMALL_NODE_SIZE=30;function pxToNumber(px){return parseInt(px.replace("px",""),10)}function round(value){return Number.isInteger(value)?value:value.toFixed(2)}function filterZeroValues(labels){return labels.filter(l=>l.text!==0&&l.text!=="0")}function floatingAlignment(extremities){let windowExtremities={top:global.window.scrollY,bottom:global.window.scrollY+global.window.innerHeight,left:global.window.scrollX,right:global.window.scrollX+global.window.innerWidth},distances={top:Math.abs(windowExtremities.top-extremities.top),bottom:Math.abs(windowExtremities.bottom-extremities.bottom),left:Math.abs(windowExtremities.left-extremities.left),right:Math.abs(windowExtremities.right-extremities.right)};return {x:distances.left>distances.right?"left":"right",y:distances.top>distances.bottom?"top":"bottom"}}function measureElement(element){let style=global.getComputedStyle(element),{top,left,right,bottom,width,height}=element.getBoundingClientRect(),{marginTop,marginBottom,marginLeft,marginRight,paddingTop,paddingBottom,paddingLeft,paddingRight,borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth}=style;top=top+global.window.scrollY,left=left+global.window.scrollX,bottom=bottom+global.window.scrollY,right=right+global.window.scrollX;let margin={top:pxToNumber(marginTop),bottom:pxToNumber(marginBottom),left:pxToNumber(marginLeft),right:pxToNumber(marginRight)},padding={top:pxToNumber(paddingTop),bottom:pxToNumber(paddingBottom),left:pxToNumber(paddingLeft),right:pxToNumber(paddingRight)},border={top:pxToNumber(borderTopWidth),bottom:pxToNumber(borderBottomWidth),left:pxToNumber(borderLeftWidth),right:pxToNumber(borderRightWidth)},extremities={top:top-margin.top,bottom:bottom+margin.bottom,left:left-margin.left,right:right+margin.right};return {margin,padding,border,top,left,bottom,right,width,height,extremities,floatingAlignment:floatingAlignment(extremities)}}function drawMargin(context,{margin,width,height,top,left,bottom,right}){let marginHeight=height+margin.bottom+margin.top;context.fillStyle=colors2.margin,context.fillRect(left,top-margin.top,width,margin.top),context.fillRect(right,top-margin.top,margin.right,marginHeight),context.fillRect(left,bottom,width,margin.bottom),context.fillRect(left-margin.left,top-margin.top,margin.left,marginHeight);let marginLabels=[{type:"margin",text:round(margin.top),position:"top"},{type:"margin",text:round(margin.right),position:"right"},{type:"margin",text:round(margin.bottom),position:"bottom"},{type:"margin",text:round(margin.left),position:"left"}];return filterZeroValues(marginLabels)}function drawPadding(context,{padding,border,width,height,top,left,bottom,right}){let paddingWidth=width-border.left-border.right,paddingHeight=height-padding.top-padding.bottom-border.top-border.bottom;context.fillStyle=colors2.padding,context.fillRect(left+border.left,top+border.top,paddingWidth,padding.top),context.fillRect(right-padding.right-border.right,top+padding.top+border.top,padding.right,paddingHeight),context.fillRect(left+border.left,bottom-padding.bottom-border.bottom,paddingWidth,padding.bottom),context.fillRect(left+border.left,top+padding.top+border.top,padding.left,paddingHeight);let paddingLabels=[{type:"padding",text:padding.top,position:"top"},{type:"padding",text:padding.right,position:"right"},{type:"padding",text:padding.bottom,position:"bottom"},{type:"padding",text:padding.left,position:"left"}];return filterZeroValues(paddingLabels)}function drawBorder(context,{border,width,height,top,left,bottom,right}){let borderHeight=height-border.top-border.bottom;context.fillStyle=colors2.border,context.fillRect(left,top,width,border.top),context.fillRect(left,bottom-border.bottom,width,border.bottom),context.fillRect(left,top+border.top,border.left,borderHeight),context.fillRect(right-border.right,top+border.top,border.right,borderHeight);let borderLabels=[{type:"border",text:border.top,position:"top"},{type:"border",text:border.right,position:"right"},{type:"border",text:border.bottom,position:"bottom"},{type:"border",text:border.left,position:"left"}];return filterZeroValues(borderLabels)}function drawContent(context,{padding,border,width,height,top,left}){let contentWidth=width-border.left-border.right-padding.left-padding.right,contentHeight=height-padding.top-padding.bottom-border.top-border.bottom;return context.fillStyle=colors2.content,context.fillRect(left+border.left+padding.left,top+border.top+padding.top,contentWidth,contentHeight),[{type:"content",position:"center",text:`${round(contentWidth)} x ${round(contentHeight)}`}]}function drawBoxModel(element){return context=>{if(element&&context){let measurements=measureElement(element),marginLabels=drawMargin(context,measurements),paddingLabels=drawPadding(context,measurements),borderLabels=drawBorder(context,measurements),contentLabels=drawContent(context,measurements),externalLabels=measurements.width<=SMALL_NODE_SIZE*3||measurements.height<=SMALL_NODE_SIZE;labelStacks(context,measurements,[...contentLabels,...paddingLabels,...borderLabels,...marginLabels],externalLabels);}}}function drawSelectedElement(element){draw(drawBoxModel(element));}var deepElementFromPoint=(x,y)=>{let element=global.document.elementFromPoint(x,y),crawlShadows=node=>{if(node&&node.shadowRoot){let nestedElement=node.shadowRoot.elementFromPoint(x,y);return node.isEqualNode(nestedElement)?node:nestedElement.shadowRoot?crawlShadows(nestedElement):nestedElement}return node};return crawlShadows(element)||element};var nodeAtPointerRef,pointer={x:0,y:0};function findAndDrawElement(x,y){nodeAtPointerRef=deepElementFromPoint(x,y),drawSelectedElement(nodeAtPointerRef);}var withMeasure=(StoryFn,context)=>{let{measureEnabled}=context.globals;return useEffect(()=>{let onPointerMove=event=>{window.requestAnimationFrame(()=>{event.stopPropagation(),pointer.x=event.clientX,pointer.y=event.clientY;});};return document.addEventListener("pointermove",onPointerMove),()=>{document.removeEventListener("pointermove",onPointerMove);}},[]),useEffect(()=>{let onPointerOver=event=>{window.requestAnimationFrame(()=>{event.stopPropagation(),findAndDrawElement(event.clientX,event.clientY);});},onResize=()=>{window.requestAnimationFrame(()=>{rescale();});};return context.viewMode==="story"&&measureEnabled&&(document.addEventListener("pointerover",onPointerOver),init(),window.addEventListener("resize",onResize),findAndDrawElement(pointer.x,pointer.y)),()=>{window.removeEventListener("resize",onResize),destroy();}},[measureEnabled,context.viewMode]),StoryFn()};var PARAM_KEY="measureEnabled";var decorators=[withMeasure],globals={[PARAM_KEY]:!1};
+var previewApi = require('storybook/internal/preview-api');
+var global = require('@storybook/global');
+var invariant = require('tiny-invariant');
 
-export { decorators, globals };
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var invariant__default = /*#__PURE__*/_interopDefault(invariant);
+
+var PARAM_KEY="measureEnabled";function getDocumentWidthAndHeight(){let container=global.global.document.documentElement,height=Math.max(container.scrollHeight,container.offsetHeight);return {width:Math.max(container.scrollWidth,container.offsetWidth),height}}function createCanvas(){let canvas=global.global.document.createElement("canvas");canvas.id="storybook-addon-measure";let context=canvas.getContext("2d");invariant__default.default(context!=null);let{width,height}=getDocumentWidthAndHeight();return setCanvasWidthAndHeight(canvas,context,{width,height}),canvas.style.position="absolute",canvas.style.left="0",canvas.style.top="0",canvas.style.zIndex="2147483647",canvas.style.pointerEvents="none",global.global.document.body.appendChild(canvas),{canvas,context,width,height}}function setCanvasWidthAndHeight(canvas,context,{width,height}){canvas.style.width=`${width}px`,canvas.style.height=`${height}px`;let scale=global.global.window.devicePixelRatio;canvas.width=Math.floor(width*scale),canvas.height=Math.floor(height*scale),context.scale(scale,scale);}var state={};function init(){state.canvas||(state=createCanvas());}function clear(){state.context&&state.context.clearRect(0,0,state.width??0,state.height??0);}function draw(callback){clear(),callback(state.context);}function rescale(){invariant__default.default(state.canvas,"Canvas should exist in the state."),invariant__default.default(state.context,"Context should exist in the state."),setCanvasWidthAndHeight(state.canvas,state.context,{width:0,height:0});let{width,height}=getDocumentWidthAndHeight();setCanvasWidthAndHeight(state.canvas,state.context,{width,height}),state.width=width,state.height=height;}function destroy(){state.canvas&&(clear(),state.canvas.parentNode?.removeChild(state.canvas),state={});}var colors={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},labelPadding=6;function roundedRect(context,{x,y,w,h,r}){x=x-w/2,y=y-h/2,w<2*r&&(r=w/2),h<2*r&&(r=h/2),context.beginPath(),context.moveTo(x+r,y),context.arcTo(x+w,y,x+w,y+h,r),context.arcTo(x+w,y+h,x,y+h,r),context.arcTo(x,y+h,x,y,r),context.arcTo(x,y,x+w,y,r),context.closePath();}function positionCoordinate(position,{padding,border,width,height,top,left}){let contentWidth=width-border.left-border.right-padding.left-padding.right,contentHeight=height-padding.top-padding.bottom-border.top-border.bottom,x=left+border.left+padding.left,y=top+border.top+padding.top;return position==="top"?x+=contentWidth/2:position==="right"?(x+=contentWidth,y+=contentHeight/2):position==="bottom"?(x+=contentWidth/2,y+=contentHeight):position==="left"?y+=contentHeight/2:position==="center"&&(x+=contentWidth/2,y+=contentHeight/2),{x,y}}function offset(type,position,{margin,border,padding},labelPaddingSize,external){let shift=dir=>0,offsetX=0,offsetY=0,locationMultiplier=external?1:.5,labelPaddingShift=external?labelPaddingSize*2:0;return type==="padding"?shift=dir=>padding[dir]*locationMultiplier+labelPaddingShift:type==="border"?shift=dir=>padding[dir]+border[dir]*locationMultiplier+labelPaddingShift:type==="margin"&&(shift=dir=>padding[dir]+border[dir]+margin[dir]*locationMultiplier+labelPaddingShift),position==="top"?offsetY=-shift("top"):position==="right"?offsetX=shift("right"):position==="bottom"?offsetY=shift("bottom"):position==="left"&&(offsetX=-shift("left")),{offsetX,offsetY}}function collide(a,b){return Math.abs(a.x-b.x)<Math.abs(a.w+b.w)/2&&Math.abs(a.y-b.y)<Math.abs(a.h+b.h)/2}function overlapAdjustment(position,currentRect,prevRect){return position==="top"?currentRect.y=prevRect.y-prevRect.h-labelPadding:position==="right"?currentRect.x=prevRect.x+prevRect.w/2+labelPadding+currentRect.w/2:position==="bottom"?currentRect.y=prevRect.y+prevRect.h+labelPadding:position==="left"&&(currentRect.x=prevRect.x-prevRect.w/2-labelPadding-currentRect.w/2),{x:currentRect.x,y:currentRect.y}}function textWithRect(context,type,{x,y,w,h},text){return roundedRect(context,{x,y,w,h,r:3}),context.fillStyle=`${colors[type]}dd`,context.fill(),context.strokeStyle=colors[type],context.stroke(),context.fillStyle=colors.text,context.fillText(text,x,y),roundedRect(context,{x,y,w,h,r:3}),context.fillStyle=`${colors[type]}dd`,context.fill(),context.strokeStyle=colors[type],context.stroke(),context.fillStyle=colors.text,context.fillText(text,x,y),{x,y,w,h}}function configureText(context,text){context.font="600 12px monospace",context.textBaseline="middle",context.textAlign="center";let metrics=context.measureText(text),actualHeight=metrics.actualBoundingBoxAscent+metrics.actualBoundingBoxDescent,w=metrics.width+labelPadding*2,h=actualHeight+labelPadding*2;return {w,h}}function drawLabel(context,measurements,{type,position="center",text},prevRect,external=!1){let{x,y}=positionCoordinate(position,measurements),{offsetX,offsetY}=offset(type,position,measurements,labelPadding+1,external);x+=offsetX,y+=offsetY;let{w,h}=configureText(context,text);if(prevRect&&collide({x,y,w,h},prevRect)){let adjusted=overlapAdjustment(position,{x,y,w,h},prevRect);x=adjusted.x,y=adjusted.y;}return textWithRect(context,type,{x,y,w,h},text)}function floatingOffset(alignment,{w,h}){let deltaW=w*.5+labelPadding,deltaH=h*.5+labelPadding;return {offsetX:(alignment.x==="left"?-1:1)*deltaW,offsetY:(alignment.y==="top"?-1:1)*deltaH}}function drawFloatingLabel(context,measurements,{type,text}){let{floatingAlignment:floatingAlignment2,extremities}=measurements,x=extremities[floatingAlignment2.x],y=extremities[floatingAlignment2.y],{w,h}=configureText(context,text),{offsetX,offsetY}=floatingOffset(floatingAlignment2,{w,h});return x+=offsetX,y+=offsetY,textWithRect(context,type,{x,y,w,h},text)}function drawStack(context,measurements,stack,external){let rects=[];stack.forEach((l,idx)=>{let rect=external&&l.position==="center"?drawFloatingLabel(context,measurements,l):drawLabel(context,measurements,l,rects[idx-1],external);rects[idx]=rect;});}function labelStacks(context,measurements,labels,externalLabels){let stacks=labels.reduce((acc,l)=>(Object.prototype.hasOwnProperty.call(acc,l.position)||(acc[l.position]=[]),acc[l.position]?.push(l),acc),{});stacks.top&&drawStack(context,measurements,stacks.top,externalLabels),stacks.right&&drawStack(context,measurements,stacks.right,externalLabels),stacks.bottom&&drawStack(context,measurements,stacks.bottom,externalLabels),stacks.left&&drawStack(context,measurements,stacks.left,externalLabels),stacks.center&&drawStack(context,measurements,stacks.center,externalLabels);}var colors2={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},SMALL_NODE_SIZE=30;function pxToNumber(px){return parseInt(px.replace("px",""),10)}function round(value){return Number.isInteger(value)?value:value.toFixed(2)}function filterZeroValues(labels){return labels.filter(l=>l.text!==0&&l.text!=="0")}function floatingAlignment(extremities){let windowExtremities={top:global.global.window.scrollY,bottom:global.global.window.scrollY+global.global.window.innerHeight,left:global.global.window.scrollX,right:global.global.window.scrollX+global.global.window.innerWidth},distances={top:Math.abs(windowExtremities.top-extremities.top),bottom:Math.abs(windowExtremities.bottom-extremities.bottom),left:Math.abs(windowExtremities.left-extremities.left),right:Math.abs(windowExtremities.right-extremities.right)};return {x:distances.left>distances.right?"left":"right",y:distances.top>distances.bottom?"top":"bottom"}}function measureElement(element){let style=global.global.getComputedStyle(element),{top,left,right,bottom,width,height}=element.getBoundingClientRect(),{marginTop,marginBottom,marginLeft,marginRight,paddingTop,paddingBottom,paddingLeft,paddingRight,borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth}=style;top=top+global.global.window.scrollY,left=left+global.global.window.scrollX,bottom=bottom+global.global.window.scrollY,right=right+global.global.window.scrollX;let margin={top:pxToNumber(marginTop),bottom:pxToNumber(marginBottom),left:pxToNumber(marginLeft),right:pxToNumber(marginRight)},padding={top:pxToNumber(paddingTop),bottom:pxToNumber(paddingBottom),left:pxToNumber(paddingLeft),right:pxToNumber(paddingRight)},border={top:pxToNumber(borderTopWidth),bottom:pxToNumber(borderBottomWidth),left:pxToNumber(borderLeftWidth),right:pxToNumber(borderRightWidth)},extremities={top:top-margin.top,bottom:bottom+margin.bottom,left:left-margin.left,right:right+margin.right};return {margin,padding,border,top,left,bottom,right,width,height,extremities,floatingAlignment:floatingAlignment(extremities)}}function drawMargin(context,{margin,width,height,top,left,bottom,right}){let marginHeight=height+margin.bottom+margin.top;context.fillStyle=colors2.margin,context.fillRect(left,top-margin.top,width,margin.top),context.fillRect(right,top-margin.top,margin.right,marginHeight),context.fillRect(left,bottom,width,margin.bottom),context.fillRect(left-margin.left,top-margin.top,margin.left,marginHeight);let marginLabels=[{type:"margin",text:round(margin.top),position:"top"},{type:"margin",text:round(margin.right),position:"right"},{type:"margin",text:round(margin.bottom),position:"bottom"},{type:"margin",text:round(margin.left),position:"left"}];return filterZeroValues(marginLabels)}function drawPadding(context,{padding,border,width,height,top,left,bottom,right}){let paddingWidth=width-border.left-border.right,paddingHeight=height-padding.top-padding.bottom-border.top-border.bottom;context.fillStyle=colors2.padding,context.fillRect(left+border.left,top+border.top,paddingWidth,padding.top),context.fillRect(right-padding.right-border.right,top+padding.top+border.top,padding.right,paddingHeight),context.fillRect(left+border.left,bottom-padding.bottom-border.bottom,paddingWidth,padding.bottom),context.fillRect(left+border.left,top+padding.top+border.top,padding.left,paddingHeight);let paddingLabels=[{type:"padding",text:padding.top,position:"top"},{type:"padding",text:padding.right,position:"right"},{type:"padding",text:padding.bottom,position:"bottom"},{type:"padding",text:padding.left,position:"left"}];return filterZeroValues(paddingLabels)}function drawBorder(context,{border,width,height,top,left,bottom,right}){let borderHeight=height-border.top-border.bottom;context.fillStyle=colors2.border,context.fillRect(left,top,width,border.top),context.fillRect(left,bottom-border.bottom,width,border.bottom),context.fillRect(left,top+border.top,border.left,borderHeight),context.fillRect(right-border.right,top+border.top,border.right,borderHeight);let borderLabels=[{type:"border",text:border.top,position:"top"},{type:"border",text:border.right,position:"right"},{type:"border",text:border.bottom,position:"bottom"},{type:"border",text:border.left,position:"left"}];return filterZeroValues(borderLabels)}function drawContent(context,{padding,border,width,height,top,left}){let contentWidth=width-border.left-border.right-padding.left-padding.right,contentHeight=height-padding.top-padding.bottom-border.top-border.bottom;return context.fillStyle=colors2.content,context.fillRect(left+border.left+padding.left,top+border.top+padding.top,contentWidth,contentHeight),[{type:"content",position:"center",text:`${round(contentWidth)} x ${round(contentHeight)}`}]}function drawBoxModel(element){return context=>{if(element&&context){let measurements=measureElement(element),marginLabels=drawMargin(context,measurements),paddingLabels=drawPadding(context,measurements),borderLabels=drawBorder(context,measurements),contentLabels=drawContent(context,measurements),externalLabels=measurements.width<=SMALL_NODE_SIZE*3||measurements.height<=SMALL_NODE_SIZE;labelStacks(context,measurements,[...contentLabels,...paddingLabels,...borderLabels,...marginLabels],externalLabels);}}}function drawSelectedElement(element){draw(drawBoxModel(element));}var deepElementFromPoint=(x,y)=>{let element=global.global.document.elementFromPoint(x,y),crawlShadows=node=>{if(node&&node.shadowRoot){let nestedElement=node.shadowRoot.elementFromPoint(x,y);return node.isEqualNode(nestedElement)?node:nestedElement.shadowRoot?crawlShadows(nestedElement):nestedElement}return node};return crawlShadows(element)||element};var nodeAtPointerRef,pointer={x:0,y:0};function findAndDrawElement(x,y){nodeAtPointerRef=deepElementFromPoint(x,y),drawSelectedElement(nodeAtPointerRef);}var withMeasure=(StoryFn,context)=>{let{measureEnabled}=context.globals;return previewApi.useEffect(()=>{let onPointerMove=event=>{window.requestAnimationFrame(()=>{event.stopPropagation(),pointer.x=event.clientX,pointer.y=event.clientY;});};return document.addEventListener("pointermove",onPointerMove),()=>{document.removeEventListener("pointermove",onPointerMove);}},[]),previewApi.useEffect(()=>{let onPointerOver=event=>{window.requestAnimationFrame(()=>{event.stopPropagation(),findAndDrawElement(event.clientX,event.clientY);});},onResize=()=>{window.requestAnimationFrame(()=>{rescale();});};return context.viewMode==="story"&&measureEnabled&&(document.addEventListener("pointerover",onPointerOver),init(),window.addEventListener("resize",onResize),findAndDrawElement(pointer.x,pointer.y)),()=>{window.removeEventListener("resize",onResize),destroy();}},[measureEnabled,context.viewMode]),StoryFn()};var decorators=[withMeasure],initialGlobals={[PARAM_KEY]:!1};
+
+exports.decorators = decorators;
+exports.initialGlobals = initialGlobals;

package.json

 {
   "name": "@storybook/addon-measure",
-  "version": "0.0.0-pr-26243-sha-393e9350",
+  "version": "0.0.0-pr-26243-sha-c7b1761e",
   "description": "Inspect layouts by visualizing the box model",
@@ -30,8 +30,11 @@ "keywords": [
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.mjs",
+      "require": "./dist/preview.js"
+    },
     "./manager": "./dist/manager.js",
-    "./preview": "./dist/preview.js",
     "./register": "./dist/manager.js",
@@ -64,4 +67,4 @@ "./package.json": "./package.json"
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
@@ -73,9 +76,3 @@ "dependencies": {
   "devDependencies": {
-    "@storybook/client-logger": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/components": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/core-events": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/icons": "^1.2.5",
-    "@storybook/manager-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/preview-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/types": "0.0.0-pr-26243-sha-393e9350",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
@@ -85,2 +82,5 @@ "react-dom": "^18.2.0",
   },
+  "peerDependencies": {
+    "storybook": "^0.0.0-pr-26243-sha-c7b1761e"
+  },
   "publishConfig": {
@@ -100,3 +100,3 @@ "access": "public"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
@@ -103,0 +103,0 @@ "displayName": "Measure",

README.md

@@ -15,3 +15,3 @@ # Storybook Addon Measure
 
-This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
@@ -18,0 +18,0 @@ ```sh

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

Major refactor

Supply chain risk

Package 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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

32020

increased by72.61%

Dev dependency count

4

decreased by-60%

Number of package files

11

increased by22.22%

Lines of code

138

increased by91.67%

Worsened metrics

Dependency count

3

increased by50%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes