@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTDocumentWizard/README.md

@@ -0,0 +1,106 @@
+# UTDocumentWizard
+
+A component that provides an interactive document viewer with navigable sections. It allows users to explore different sections of a document (like a bill or form) through an intuitive interface with clickable areas and detailed information panels.
+
+## Props
+
+
+| Name        | Type                                                                                                                                           | Default | Description                                                                                                                                                                                                                                                |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classNames  | objectOf(string)                                                                                                                               |         | Additional class names to apply for further styling.                                                                                                                                                                                                       |
+| pages       | array                                                                                                                                          | []      | Array of page objects that define the document pages to be displayed.                                                                                                                                                                                      |
+| scaleConfig | shapeOf({<br />extraSpacingLeft: number, extraSpacingRight: number, extraSpacingTop: number, extraSpacingBottom: number,<br /> scale: number}) | {}      | Object defining rendering scale and padding parameters: includes a numeric `scale` factor and optional `extraSpacingLeft`, `extraSpacingRight`, `extraSpacingTop` and `extraSpacingBottom` values to adjust the zoom level and margins around the content. |
+| sections    | array                                                                                                                                          | []      | Array of section objects that define the interactive areas within each page.                                                                                                                                                                               |
+| labels      | object                                                                                                                                         | {}      | Object containing text labels for UI elements.                                                                                                                                                                                                             |
+
+### pages
+
+Each page object in the `pages` array should have the following structure:
+
+```javascript
+{
+  id: number,       // Unique identifier for the page
+  image: string,    // URL of the page image
+  name: string      // Display name of the page
+}
+```
+
+### sections
+
+Each section object in the `sections` array should have the following structure:
+
+```javascript
+{
+  id: number,                  // Unique identifier for the section
+  page_id: number,             // ID of the page this section       belongs to
+  label: string,               // Short label for the section (e.g., "1", "2")
+  title: string,               // Title of the section
+  description: string,         // Detailed description of the section
+  section_coordinates: array,  // Coordinates [x1, y1, x2, y2] defining the clickable area
+  section_number: number,      // Order number of the section
+}
+```
+
+### translations
+
+The translations object should have the following structure:
+
+```javascript
+{
+  chevronsManagerTitle: string,  // Title for the chevrons manager
+  sectionDetails: {
+    titleDefault: string,       // Default title for section details
+    descriptionDefault: string  // Default description for section details
+  }
+}
+```
+
+## Example Usage
+
+```jsx
+import { UTDocumentWizard } from 'energy-ui';
+
+const pages = [
+  {
+    id: 1,
+    image: 'https://example.com/front.png',
+    name: 'Front'
+  },
+  {
+    id: 2,
+    image: 'https://example.com/back.png',
+    name: 'Back'
+  }
+];
+
+const sections = [
+  {
+    id: 1001,
+    page_id: 1,
+    label: '1',
+    title: 'Section 1',
+    description: 'Description of section 1',
+    section_coordinates: [40, 45, 990, 152],
+    section_number: 1
+  }
+  // ... more sections
+];
+
+const translations = {
+  chevronsManagerTitle: 'Explore your document!',
+  sectionDetails: {
+    titleDefault: 'Explore your document!',
+    descriptionDefault: 'Click on different sections to see detailed information'
+  }
+};
+
+const MyComponent = () => <UTDocumentWizard pages={pages} sections={sections} labels={labels} />;
+```
+
+## Features
+
+- Interactive document navigation
+- Mobile-responsive design
+- Clickable sections with detailed information panels
+- Support for multiple pages
+- Customizable text labels

package/dist/esm/components/UTDocumentWizard/components/ChevronsManager/index.js

@@ -1 +1,35 @@
-import React from"react";import{bool,func}from"prop-types";import UTButton from"../../../UTButton";import{NEXT,PREV}from"../../constants";import styles from"./styles.module.scss";const ChevronsManager=_ref=>{let{prevDisabled:prevDisabled,nextDisabled:nextDisabled,onClick:onClick}=_ref;return React.createElement("div",{className:styles.container},React.createElement(UTButton,{variant:"semitransparent",colorTheme:"accent",disabled:prevDisabled,Icon:"IconArrowNarrowLeft",onClick:()=>onClick(PREV)}),React.createElement("div",{className:styles.marginRight}),React.createElement(UTButton,{variant:"semitransparent",colorTheme:"accent",disabled:nextDisabled,Icon:"IconArrowNarrowRight",onClick:()=>onClick(NEXT)}))};ChevronsManager.propTypes={prevDisabled:bool,nextDisabled:bool,onClick:func};export default ChevronsManager;
+import React from 'react';
+import { bool, func } from 'prop-types';
+import UTButton from '../../../UTButton';
+import { NEXT, PREV } from '../../constants';
+import styles from './styles.module.scss';
+const ChevronsManager = _ref => {
+  let {
+    prevDisabled,
+    nextDisabled,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    variant: "semitransparent",
+    colorTheme: "accent",
+    disabled: prevDisabled,
+    Icon: "IconArrowNarrowLeft",
+    onClick: () => onClick(PREV)
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.marginRight
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    variant: "semitransparent",
+    colorTheme: "accent",
+    disabled: nextDisabled,
+    Icon: "IconArrowNarrowRight",
+    onClick: () => onClick(NEXT)
+  }));
+};
+ChevronsManager.propTypes = {
+  prevDisabled: bool,
+  nextDisabled: bool,
+  onClick: func
+};
+export default ChevronsManager;

package/dist/esm/components/UTDocumentWizard/components/PageWizard/constants.js

@@ -1 +1,5 @@
-export const DEFAULT_SCALE=1;export const DEFAULT_SPACING_BOTTOM=0;export const DEFAULT_SPACING_LEFT=0;export const DEFAULT_SPACING_RIGHT=36;export const DEFAULT_SPACING_TOP=48;
+export const DEFAULT_SCALE = 1;
+export const DEFAULT_SPACING_BOTTOM = 0;
+export const DEFAULT_SPACING_LEFT = 0;
+export const DEFAULT_SPACING_RIGHT = 36;
+export const DEFAULT_SPACING_TOP = 48;

package/dist/esm/components/UTDocumentWizard/components/PageWizard/index.js

@@ -1 +1,86 @@
-import{arrayOf,bool,func,object,string}from"prop-types";import React,{useEffect,useRef}from"react";import{drawSection,handleCanvasClick,handleMouseMove}from"./utils";import{DEFAULT_SCALE,DEFAULT_SPACING_BOTTOM,DEFAULT_SPACING_LEFT,DEFAULT_SPACING_RIGHT,DEFAULT_SPACING_TOP}from"./constants";import styles from"./styles.module.scss";const PageWizard=_ref=>{let{canvasRef:canvasRef,classNames:classNames,clickedSection:clickedSection,isChangingTab:isChangingTab,isMobileSize:isMobileSize,isSheetOpen:isSheetOpen,onSectionChange:onSectionChange,page:page,scaleConfig:scaleConfig={extraSpacingLeft:DEFAULT_SPACING_LEFT,extraSpacingRight:DEFAULT_SPACING_RIGHT,extraSpacingTop:DEFAULT_SPACING_TOP,extraSpacingBottom:DEFAULT_SPACING_BOTTOM,scale:DEFAULT_SCALE},sectionSelected:sectionSelected,sections:sections}=_ref;const sectionsBadgeCoord={},sectionsCoord={},animations=useRef({}),{extraSpacingLeft:extraSpacingLeft,extraSpacingRight:extraSpacingRight,extraSpacingTop:extraSpacingTop,extraSpacingBottom:extraSpacingBottom,scale:scale}=scaleConfig;return useEffect(()=>{const canvas=canvasRef.current;if(!canvas)return;const ctx=canvas.getContext("2d"),image=new Image;image.src=page.image,image.onload=()=>{const dpi=window.devicePixelRatio||1,userScale=scale,padLeft=extraSpacingLeft,padRight=extraSpacingRight,padTop=extraSpacingTop,padBottom=extraSpacingBottom;canvas.width=(image.width+padLeft+padRight)*dpi,canvas.height=(image.height+padTop+padBottom)*dpi,canvas.style.width="".concat((image.width+padLeft+padRight)*userScale,"px"),canvas.style.height="".concat((image.height+padTop+padBottom)*userScale,"px"),ctx.setTransform(dpi,0,0,dpi,padLeft,padTop),ctx.clearRect(-padLeft,-padTop,canvas.width,canvas.height),ctx.drawImage(image,0,0),sections.forEach(section=>drawSection(ctx,image,section,page,clickedSection,sectionsCoord,sectionsBadgeCoord,sectionSelected,animations,isSheetOpen,isMobileSize))}},[page.image,sections,clickedSection,animations.current,false,isSheetOpen]),useEffect(()=>{onSectionChange(null)},[page.image]),React.createElement("canvas",{ref:canvasRef,tabIndex:"0",className:"".concat(styles.container," ").concat(null==classNames?void 0:classNames.canvasContainer," ").concat(isChangingTab?styles.displayNone:styles.displayFlex),onClick:e=>handleCanvasClick(e,canvasRef,onSectionChange,sectionsBadgeCoord,sectionsCoord),onMouseMove:e=>handleMouseMove(e,canvasRef,sectionsBadgeCoord,sectionsCoord,false)})};PageWizard.propTypes={canvasRef:object,classNames:object,clickedSection:string,isChangingTab:bool,isMobileSize:bool,isSheetOpen:bool,page:object,scaleConfig:object,sectionSelected:object,sections:arrayOf({}),onSectionChange:func};export default PageWizard;
+import { arrayOf, bool, func, object, string } from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+import { drawSection, handleCanvasClick, handleMouseMove } from './utils';
+import { DEFAULT_SCALE, DEFAULT_SPACING_BOTTOM, DEFAULT_SPACING_LEFT, DEFAULT_SPACING_RIGHT, DEFAULT_SPACING_TOP } from './constants';
+import styles from './styles.module.scss';
+const PageWizard = _ref => {
+  let {
+    canvasRef,
+    classNames,
+    clickedSection,
+    isChangingTab,
+    isMobileSize,
+    isSheetOpen,
+    onSectionChange,
+    page,
+    scaleConfig = {
+      extraSpacingLeft: DEFAULT_SPACING_LEFT,
+      extraSpacingRight: DEFAULT_SPACING_RIGHT,
+      extraSpacingTop: DEFAULT_SPACING_TOP,
+      extraSpacingBottom: DEFAULT_SPACING_BOTTOM,
+      scale: DEFAULT_SCALE
+    },
+    sectionSelected,
+    sections
+  } = _ref;
+  const sectionsBadgeCoord = {};
+  const sectionsCoord = {};
+  const animations = useRef({});
+  const isPointer = false;
+  const {
+    extraSpacingLeft,
+    extraSpacingRight,
+    extraSpacingTop,
+    extraSpacingBottom,
+    scale
+  } = scaleConfig;
+  const onClick = e => handleCanvasClick(e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord);
+  const onMouseMove = e => handleMouseMove(e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const image = new Image();
+    image.src = page.image;
+    image.onload = () => {
+      const dpi = window.devicePixelRatio || 1;
+      const userScale = scale;
+      const padLeft = extraSpacingLeft;
+      const padRight = extraSpacingRight;
+      const padTop = extraSpacingTop;
+      const padBottom = extraSpacingBottom;
+      canvas.width = (image.width + padLeft + padRight) * dpi;
+      canvas.height = (image.height + padTop + padBottom) * dpi;
+      canvas.style.width = "".concat((image.width + padLeft + padRight) * userScale, "px");
+      canvas.style.height = "".concat((image.height + padTop + padBottom) * userScale, "px");
+      ctx.setTransform(dpi, 0, 0, dpi, padLeft, padTop);
+      ctx.clearRect(-padLeft, -padTop, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0);
+      sections.forEach(section => drawSection(ctx, image, section, page, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize));
+    };
+  }, [page.image, sections, clickedSection, animations.current, isPointer, isSheetOpen]);
+  useEffect(() => {
+    onSectionChange(null);
+  }, [page.image]);
+  return /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    tabIndex: "0",
+    className: "".concat(styles.container, " ").concat(classNames === null || classNames === void 0 ? void 0 : classNames.canvasContainer, " ").concat(isChangingTab ? styles.displayNone : styles.displayFlex),
+    onClick: onClick,
+    onMouseMove: onMouseMove
+  });
+};
+PageWizard.propTypes = {
+  canvasRef: object,
+  classNames: object,
+  clickedSection: string,
+  isChangingTab: bool,
+  isMobileSize: bool,
+  isSheetOpen: bool,
+  page: object,
+  scaleConfig: object,
+  sectionSelected: object,
+  sections: arrayOf({}),
+  onSectionChange: func
+};
+export default PageWizard;

package/dist/esm/components/UTDocumentWizard/components/PageWizard/utils.js

@@ -1 +1,276 @@
-import isEmpty from"lodash/isEmpty";import{getColorValue}from"../../../../utils/colorUtils";import{resolveCssValue}from"../../../../utils/classesUtils";const drawRoundedStrokeRect=(ctx,x,y,width,height,radius)=>{ctx.save(),ctx.globalAlpha=.1,ctx.fillStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.beginPath(),ctx.moveTo(x+radius,y),ctx.lineTo(x+width-radius,y),ctx.arcTo(x+width,y,x+width,y+height,radius),ctx.lineTo(x+width,y+height-radius),ctx.arcTo(x+width,y+height,x+width-radius,y+height,radius),ctx.lineTo(x+radius,y+height),ctx.arcTo(x,y+height,x,y+height-radius,radius),ctx.lineTo(x,y+radius),ctx.arcTo(x,y,x+radius,y,radius),ctx.closePath(),ctx.fill(),ctx.restore(),ctx.strokeStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.lineWidth=1,ctx.stroke()},resizeText=(ctx,text,maxWidth)=>{const fontFamily=resolveCssValue("var(--fontFamily)")||"Inter";let fontSize=14;for(ctx.font="600 ".concat(fontSize,"px ").concat(fontFamily);ctx.measureText(text).width>maxWidth&&fontSize>10;)fontSize-=1,ctx.font="600 ".concat(fontSize,"px ").concat(fontFamily);return fontSize},drawBadge=(ctx,x,y,radius,sectionLabel)=>{ctx.beginPath(),ctx.arc(x,y,radius,0,2*Math.PI),ctx.fillStyle=getColorValue("--light01","rgba(255, 255, 255, 1)"),ctx.fill(),ctx.lineWidth=1,ctx.strokeStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.stroke(),ctx.beginPath(),ctx.arc(x,y,14,0,2*Math.PI),ctx.fillStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.fill(),ctx.stroke(),ctx.fillStyle=getColorValue("--dark05","rgba(9, 30, 66, 1)");const fontSize=resizeText(ctx,"".concat(sectionLabel),48);ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillText("".concat(sectionLabel),x,y+fontSize/10)},drawRoundedRect=(ctx,x,yProps,width,height,radius)=>{const y=yProps+18;ctx.beginPath(),ctx.arc(x-radius+12,y+radius,radius,Math.PI,3*Math.PI/2),ctx.arc(x+width-radius+12+2,y+radius,radius,-Math.PI/2,0),ctx.arc(x+width-radius+12,y+height-radius,radius,0,Math.PI/2),ctx.arc(x-radius+12,y+height-radius,radius,Math.PI/2,Math.PI),ctx.closePath(),ctx.fillStyle="rgb(255, 255, 255)",ctx.fill(),ctx.lineWidth=1,ctx.strokeStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.beginPath(),ctx.moveTo(x-radius+4,y),ctx.lineTo(x+12+width,y),ctx.moveTo(x-radius+4,y+height),ctx.lineTo(x+width-radius+24-4,y+height),ctx.stroke()},drawBadgeSelected=(ctx,x,y,radius,sectionLabel,sectionTitle)=>{const fontSize=resizeText(ctx,"".concat(sectionLabel),48),renderTitle="".concat(sectionTitle),textWidth=ctx.measureText(renderTitle).width,newX=x-(12+textWidth/2);ctx.beginPath(),ctx.arc(newX+12,y,radius,0,2*Math.PI),ctx.fillStyle=getColorValue("--light01","rgba(255, 255, 255, 1)"),ctx.fill(),ctx.lineWidth=1,ctx.strokeStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.stroke(),ctx.beginPath(),ctx.arc(newX+textWidth+24,y,radius,0,2*Math.PI),ctx.fillStyle=getColorValue("--light01","rgba(255, 255, 255, 1)"),ctx.fill(),ctx.lineWidth=1,ctx.strokeStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.stroke(),drawRoundedRect(ctx,newX+12,y-40,textWidth,2*radius,2*Math.PI),ctx.textAlign="right",ctx.textBaseline="middle",ctx.fillStyle=getColorValue("--dark05","rgba(9, 30, 66, 1)"),ctx.fillText(renderTitle,newX+textWidth+14+24-4,y+fontSize/10),ctx.beginPath(),ctx.arc(newX+12,y,14,0,2*Math.PI),ctx.fillStyle=getColorValue("--identitySolidTone3","rgba(37, 224, 166, 1)"),ctx.fill(),ctx.stroke(),ctx.fillStyle=getColorValue("--dark05","rgba(9, 30, 66, 1)"),ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillText("".concat(sectionLabel),newX+12,y+fontSize/10)},animateTransition=(ctx,image,sectionSelected,start,end,duration,onUpdate,isClickedSection,onComplete,animations,sectionId,isSheetOpen,isMobileSize)=>{var _animations$current;let startTime;isEmpty(null===(_animations$current=animations.current)||void 0===_animations$current?void 0:_animations$current[sectionId])||(animations.current[sectionId].map(animationId=>cancelAnimationFrame(animationId)),delete animations.current[sectionId]);const animate=timestamp=>{startTime||(startTime=timestamp);const progress=Math.min((timestamp-startTime)/duration,1),lerp=(a,b,t)=>a+(b-a)*t,newPositions={x:lerp(start.x,end.x,progress),y:lerp(start.y,end.y,progress),radius:start.radius};if(ctx.save(),ctx.beginPath(),ctx.moveTo(newPositions.x-newPositions.radius,newPositions.y),ctx.arcTo(newPositions.x+newPositions.radius,newPositions.y,newPositions.x+newPositions.radius,newPositions.y,newPositions.radius),ctx.lineTo(newPositions.x+newPositions.radius+10,newPositions.y+2*newPositions.radius),ctx.lineTo(newPositions.x-newPositions.radius-10,newPositions.y+2*newPositions.radius),ctx.closePath(),ctx.clip(),ctx.drawImage(image,newPositions.x-newPositions.radius,newPositions.y-newPositions.radius,2*newPositions.radius,2*newPositions.radius+15,newPositions.x-newPositions.radius-1,newPositions.y-newPositions.radius,2*newPositions.radius+2,2*newPositions.radius+15),ctx.restore(),onUpdate(newPositions),progress<1&&!isMobileSize||progress<1&&isSheetOpen&&isMobileSize)animations.current[sectionId].push(requestAnimationFrame(animate));else{if(isClickedSection){const x1Section=sectionSelected.section_coordinates[0],y1Section=sectionSelected.section_coordinates[1],x2Section=sectionSelected.section_coordinates[2],y2Section=sectionSelected.section_coordinates[3];drawRoundedStrokeRect(ctx,x1Section,y1Section,x2Section-x1Section,y2Section-y1Section,8)}onComplete&&onComplete()}};animations.current[sectionId]=[],requestAnimationFrame(animate)};export const drawSection=(ctx,image,section,actualPage,clickedSection,sectionsCoord,sectionsBadgeCoord,sectionSelected,animations,isSheetOpen,isMobileSize)=>{if(actualPage.id===section.page_id){const[x1,y1,x2,y2]=section.section_coordinates,width=x2-x1,height=y2-y1,isClickedSection=clickedSection==="".concat(section.id);sectionsCoord[section.id]={x1:x1,y1:y1,width:width,height:height,radius:8};const EXTERNAL_RADIUS=22,xCircle=(x2+x1)/2,yCircle=isClickedSection?y1:(y2+y1)/2;sectionsBadgeCoord[section.id]={x:xCircle,y:yCircle,radius:EXTERNAL_RADIUS};const initialPositions={x:xCircle,y:(y2+y1)/2,radius:EXTERNAL_RADIUS},finalPositions=isClickedSection?{x:xCircle,y:y1,radius:EXTERNAL_RADIUS}:initialPositions;animateTransition(ctx,image,sectionSelected,initialPositions,finalPositions,height<300?300:600,newPositions=>{(!isMobileSize||isMobileSize&&isSheetOpen)&&drawBadge(ctx,newPositions.x,newPositions.y,newPositions.radius,section.label)},isClickedSection,()=>{isClickedSection?drawBadgeSelected(ctx,finalPositions.x,finalPositions.y,finalPositions.radius,section.label,section.title):drawBadge(ctx,finalPositions.x,finalPositions.y,finalPositions.radius,section.label)},animations,section.id,isSheetOpen,isMobileSize)}};export const handleCanvasClick=(e,canvasRef,onSectionChange,sectionsBadgeCoord,sectionsCoord)=>{const canvas=canvasRef.current,ctx=canvas.getContext("2d"),rect=canvas.getBoundingClientRect(),px=(e.clientX-rect.left)*(canvas.width/rect.width),py=(e.clientY-rect.top)*(canvas.height/rect.height),inv=ctx.getTransform().invertSelf(),point=new DOMPoint(px,py).matrixTransform(inv),xClick=point.x,yClick=point.y,onClick=key=>{onSectionChange(key)};Object.keys(sectionsBadgeCoord).forEach(key=>{const{x:x,y:y,radius:radius}=sectionsBadgeCoord[key];Math.sqrt((xClick-x)**2+(yClick-y)**2)<=radius&&onClick(key)}),Object.entries(sectionsCoord).forEach(_ref=>{let[key,{x1:x1,y1:y1,width:width,height:height,radius:radius}]=_ref;const isInsideRect=xClick>=x1&&xClick<=x1+width&&yClick>=y1&&yClick<=y1+height,centerX=x1+width/2,centerY=y1+height/2,distance=Math.sqrt((xClick-centerX)**2+(yClick-centerY)**2);(isInsideRect||distance<=radius)&&onClick(key)})};export const handleMouseMove=(e,canvasRef,sectionsBadgeCoord,sectionsCoord,isPointer)=>{const canvas=canvasRef.current,ctx=canvas.getContext("2d"),rect=canvas.getBoundingClientRect(),px=(e.clientX-rect.left)*(canvas.width/rect.width),py=(e.clientY-rect.top)*(canvas.height/rect.height),inv=ctx.getTransform().invertSelf(),point=new DOMPoint(px,py).matrixTransform(inv),xMove=point.x,yMove=point.y;Object.keys(sectionsBadgeCoord).forEach(key=>{const{x:x,y:y,radius:radius}=sectionsBadgeCoord[key];Math.sqrt((xMove-x)**2+(yMove-y)**2)<=radius&&(isPointer=!0)}),Object.entries(sectionsCoord).forEach(_ref2=>{let[,{x1:x1,y1:y1,width:width,height:height,radius:radius}]=_ref2;const isInsideRect=xMove>=x1&&xMove<=x1+width&&yMove>=y1&&yMove<=y1+height,centerX=x1+width/2,centerY=y1+height/2,distance=Math.sqrt((xMove-centerX)**2+(yMove-centerY)**2);(isInsideRect||distance<=radius)&&(isPointer=!0)}),canvas.style.cursor=isPointer?"pointer":"default"};
+import isEmpty from 'lodash/isEmpty';
+import { getColorValue } from '../../../../utils/colorUtils';
+import { resolveCssValue } from '../../../../utils/classesUtils';
+const drawRoundedStrokeRect = (ctx, x, y, width, height, radius) => {
+  ctx.save();
+  ctx.globalAlpha = 0.1;
+  ctx.fillStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.arcTo(x + width, y, x + width, y + height, radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+  ctx.lineTo(x + radius, y + height);
+  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+  ctx.lineTo(x, y + radius);
+  ctx.arcTo(x, y, x + radius, y, radius);
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+  ctx.strokeStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+};
+const resizeText = (ctx, text, maxWidth) => {
+  const fontFamily = resolveCssValue('var(--fontFamily)') || 'Inter';
+  let fontSize = 14;
+  ctx.font = "600 ".concat(fontSize, "px ").concat(fontFamily);
+  while (ctx.measureText(text).width > maxWidth && fontSize > 10) {
+    fontSize -= 1;
+    ctx.font = "600 ".concat(fontSize, "px ").concat(fontFamily);
+  }
+  return fontSize;
+};
+const drawBadge = (ctx, x, y, radius, sectionLabel) => {
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = getColorValue('--light01', 'rgba(255, 255, 255, 1)');
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(x, y, 14, 0, Math.PI * 2);
+  ctx.fillStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = getColorValue('--dark05', 'rgba(9, 30, 66, 1)');
+  const fontSize = resizeText(ctx, "".concat(sectionLabel), 48);
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText("".concat(sectionLabel), x, y + fontSize / 10);
+};
+const drawRoundedRect = (ctx, x, yProps, width, height, radius) => {
+  const PADDING_TITLE = 12;
+  const y = yProps + 18;
+  ctx.beginPath();
+  ctx.arc(x - radius + PADDING_TITLE, y + radius, radius, Math.PI, 3 * Math.PI / 2);
+  ctx.arc(x + width - radius + PADDING_TITLE + 2, y + radius, radius, -Math.PI / 2, 0);
+  ctx.arc(x + width - radius + PADDING_TITLE, y + height - radius, radius, 0, Math.PI / 2);
+  ctx.arc(x - radius + PADDING_TITLE, y + height - radius, radius, Math.PI / 2, Math.PI);
+  ctx.closePath();
+  ctx.fillStyle = 'rgb(255, 255, 255)';
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.beginPath();
+  ctx.moveTo(x - radius + 4, y);
+  ctx.lineTo(x + PADDING_TITLE + width, y);
+  ctx.moveTo(x - radius + 4, y + height);
+  ctx.lineTo(x + width - radius + PADDING_TITLE * 2 - 4, y + height);
+  ctx.stroke();
+};
+const drawBadgeSelected = (ctx, x, y, radius, sectionLabel, sectionTitle) => {
+  const fontSize = resizeText(ctx, "".concat(sectionLabel), 48);
+  const renderTitle = "".concat(sectionTitle);
+  const textMetrics = ctx.measureText(renderTitle);
+  const textWidth = textMetrics.width;
+  const INTERNAL_CIRCLE_SIZE = 14;
+  const PADDING_TITLE = 12;
+  const newX = x - (PADDING_TITLE + textWidth / 2);
+  ctx.beginPath();
+  ctx.arc(newX + PADDING_TITLE, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = getColorValue('--light01', 'rgba(255, 255, 255, 1)');
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(newX + textWidth + PADDING_TITLE * 2, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = getColorValue('--light01', 'rgba(255, 255, 255, 1)');
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.stroke();
+  drawRoundedRect(ctx, newX + PADDING_TITLE, y - 40, textWidth, radius * 2, Math.PI * 2);
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+  ctx.fillStyle = getColorValue('--dark05', 'rgba(9, 30, 66, 1)');
+  ctx.fillText(renderTitle, newX + textWidth + INTERNAL_CIRCLE_SIZE + PADDING_TITLE * 2 - 4, y + fontSize / 10);
+  ctx.beginPath();
+  ctx.arc(newX + PADDING_TITLE, y, INTERNAL_CIRCLE_SIZE, 0, Math.PI * 2);
+  ctx.fillStyle = getColorValue('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
+  ctx.fill();
+  ctx.stroke();
+  ctx.fillStyle = getColorValue('--dark05', 'rgba(9, 30, 66, 1)');
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText("".concat(sectionLabel), newX + PADDING_TITLE, y + fontSize / 10);
+};
+const animateTransition = (ctx, image, sectionSelected, start, end, duration, onUpdate, isClickedSection, onComplete, animations, sectionId, isSheetOpen, isMobileSize) => {
+  var _animations$current;
+  if (!isEmpty((_animations$current = animations.current) === null || _animations$current === void 0 ? void 0 : _animations$current[sectionId])) {
+    animations.current[sectionId].map(animationId => cancelAnimationFrame(animationId));
+    delete animations.current[sectionId];
+  }
+  let startTime;
+  const animate = timestamp => {
+    if (!startTime) startTime = timestamp;
+    const progress = Math.min((timestamp - startTime) / duration, 1);
+    const lerp = (a, b, t) => a + (b - a) * t;
+    const newPositions = {
+      x: lerp(start.x, end.x, progress),
+      y: lerp(start.y, end.y, progress),
+      radius: start.radius
+    };
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(newPositions.x - newPositions.radius, newPositions.y);
+    ctx.arcTo(newPositions.x + newPositions.radius, newPositions.y, newPositions.x + newPositions.radius, newPositions.y, newPositions.radius);
+    ctx.lineTo(newPositions.x + newPositions.radius + 10, newPositions.y + newPositions.radius * 2);
+    ctx.lineTo(newPositions.x - newPositions.radius - 10, newPositions.y + newPositions.radius * 2);
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(image, newPositions.x - newPositions.radius, newPositions.y - newPositions.radius, newPositions.radius * 2, newPositions.radius * 2 + 15, newPositions.x - newPositions.radius - 1, newPositions.y - newPositions.radius, newPositions.radius * 2 + 2, newPositions.radius * 2 + 15);
+    ctx.restore();
+    onUpdate(newPositions);
+    if (progress < 1 && !isMobileSize || progress < 1 && isSheetOpen && isMobileSize) {
+      animations.current[sectionId].push(requestAnimationFrame(animate));
+    } else {
+      if (isClickedSection) {
+        const x1Section = sectionSelected.section_coordinates[0];
+        const y1Section = sectionSelected.section_coordinates[1];
+        const x2Section = sectionSelected.section_coordinates[2];
+        const y2Section = sectionSelected.section_coordinates[3];
+        drawRoundedStrokeRect(ctx, x1Section, y1Section, x2Section - x1Section, y2Section - y1Section, 8);
+      }
+      if (onComplete) onComplete();
+    }
+  };
+  animations.current[sectionId] = [];
+  requestAnimationFrame(animate);
+};
+export const drawSection = (ctx, image, section, actualPage, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize) => {
+  if (actualPage.id === section.page_id) {
+    const [x1, y1, x2, y2] = section.section_coordinates;
+    const width = x2 - x1;
+    const height = y2 - y1;
+    const isClickedSection = clickedSection === "".concat(section.id);
+    sectionsCoord[section.id] = {
+      x1,
+      y1,
+      width,
+      height,
+      radius: 8
+    };
+    const EXTERNAL_RADIUS = 22;
+    const xCircle = (x2 + x1) / 2;
+    const yCircle = isClickedSection ? y1 : (y2 + y1) / 2;
+    sectionsBadgeCoord[section.id] = {
+      x: xCircle,
+      y: yCircle,
+      radius: EXTERNAL_RADIUS
+    };
+    const initialPositions = {
+      x: xCircle,
+      y: (y2 + y1) / 2,
+      radius: EXTERNAL_RADIUS
+    };
+    const finalPositions = isClickedSection ? {
+      x: xCircle,
+      y: y1,
+      radius: EXTERNAL_RADIUS
+    } : initialPositions;
+    const timeAnimation = height < 300 ? 300 : 600;
+    animateTransition(ctx, image, sectionSelected, initialPositions, finalPositions, timeAnimation, newPositions => {
+      if (!isMobileSize || isMobileSize && isSheetOpen) drawBadge(ctx, newPositions.x, newPositions.y, newPositions.radius, section.label);
+    }, isClickedSection, () => {
+      if (isClickedSection) {
+        drawBadgeSelected(ctx, finalPositions.x, finalPositions.y, finalPositions.radius, section.label, section.title);
+      } else {
+        drawBadge(ctx, finalPositions.x, finalPositions.y, finalPositions.radius, section.label);
+      }
+    }, animations, section.id, isSheetOpen, isMobileSize);
+  }
+};
+export const handleCanvasClick = (e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord) => {
+  const canvas = canvasRef.current;
+  const ctx = canvas.getContext('2d');
+  const rect = canvas.getBoundingClientRect();
+  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
+  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
+  const inv = ctx.getTransform().invertSelf();
+  const point = new DOMPoint(px, py).matrixTransform(inv);
+  const xClick = point.x;
+  const yClick = point.y;
+  const onClick = key => {
+    onSectionChange(key);
+  };
+  Object.keys(sectionsBadgeCoord).forEach(key => {
+    const {
+      x,
+      y,
+      radius
+    } = sectionsBadgeCoord[key];
+    const distance = Math.sqrt((xClick - x) ** 2 + (yClick - y) ** 2);
+    if (distance <= radius) {
+      onClick(key);
+    }
+  });
+  Object.entries(sectionsCoord).forEach(_ref => {
+    let [key, {
+      x1,
+      y1,
+      width,
+      height,
+      radius
+    }] = _ref;
+    const isInsideRect = xClick >= x1 && xClick <= x1 + width && yClick >= y1 && yClick <= y1 + height;
+    const centerX = x1 + width / 2;
+    const centerY = y1 + height / 2;
+    const distance = Math.sqrt((xClick - centerX) ** 2 + (yClick - centerY) ** 2);
+    if (isInsideRect || distance <= radius) {
+      onClick(key);
+    }
+  });
+};
+export const handleMouseMove = (e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer) => {
+  const canvas = canvasRef.current;
+  const ctx = canvas.getContext('2d');
+  const rect = canvas.getBoundingClientRect();
+  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
+  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
+  const inv = ctx.getTransform().invertSelf();
+  const point = new DOMPoint(px, py).matrixTransform(inv);
+  const xMove = point.x;
+  const yMove = point.y;
+  Object.keys(sectionsBadgeCoord).forEach(key => {
+    const {
+      x,
+      y,
+      radius
+    } = sectionsBadgeCoord[key];
+    const distance = Math.sqrt((xMove - x) ** 2 + (yMove - y) ** 2);
+    if (distance <= radius) {
+      isPointer = true;
+    }
+  });
+  Object.entries(sectionsCoord).forEach(_ref2 => {
+    let [, {
+      x1,
+      y1,
+      width,
+      height,
+      radius
+    }] = _ref2;
+    const isInsideRect = xMove >= x1 && xMove <= x1 + width && yMove >= y1 && yMove <= y1 + height;
+    const centerX = x1 + width / 2;
+    const centerY = y1 + height / 2;
+    const distance = Math.sqrt((xMove - centerX) ** 2 + (yMove - centerY) ** 2);
+    if (isInsideRect || distance <= radius) {
+      isPointer = true;
+    }
+  });
+  canvas.style.cursor = isPointer ? 'pointer' : 'default';
+};

package/dist/esm/components/UTDocumentWizard/components/SectionDetails/index.js

@@ -1 +1,48 @@
-import React from"react";import{object,string}from"prop-types";import UTLabel from"../../../UTLabel";import UTIcon from"../../../UTIcon";import styles from"./styles.module.scss";const SectionDetails=_ref=>{let{sectionSelected:sectionSelected,titleDefault:titleDefault,descriptionDefault:descriptionDefault}=_ref;if(!sectionSelected)return React.createElement("div",{className:styles.containerDefault},React.createElement("div",{className:styles.iconContainer},React.createElement(UTIcon,{area:!0,colorTheme:"accent",size:32,name:"IconClick"})),React.createElement(UTLabel,{className:styles.titleDefault,variant:"title3"},titleDefault),React.createElement(UTLabel,{colorTheme:"gray",variant:"body",className:styles.details},descriptionDefault));const{title:title,description:description}=sectionSelected;return React.createElement("div",{className:styles.container},React.createElement(UTLabel,{className:styles.title,variant:"title3"},title),React.createElement(UTLabel,{variant:"body",withMarkdown:!0},description))};SectionDetails.propTypes={descriptionDefault:string,sectionSelected:object,titleDefault:string};export default SectionDetails;
+import React from 'react';
+import { object, string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTIcon from '../../../UTIcon';
+import styles from './styles.module.scss';
+const SectionDetails = _ref => {
+  let {
+    sectionSelected,
+    titleDefault,
+    descriptionDefault
+  } = _ref;
+  if (!sectionSelected) return /*#__PURE__*/React.createElement("div", {
+    className: styles.containerDefault
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.iconContainer
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    area: true,
+    colorTheme: "accent",
+    size: 32,
+    name: "IconClick"
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.titleDefault,
+    variant: "title3"
+  }, titleDefault), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "body",
+    className: styles.details
+  }, descriptionDefault));
+  const {
+    title,
+    description
+  } = sectionSelected;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.title,
+    variant: "title3"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "body",
+    withMarkdown: true
+  }, description));
+};
+SectionDetails.propTypes = {
+  descriptionDefault: string,
+  sectionSelected: object,
+  titleDefault: string
+};
+export default SectionDetails;

package/dist/esm/components/UTDocumentWizard/components/Sheet/index.js

@@ -1 +1,31 @@
-import{object}from"prop-types";import React from"react";import UTLabel from"../../../UTLabel";import styles from"./styles.module.scss";const Sheet=_ref=>{let{sectionSelected:sectionSelected}=_ref;const{title:title,description:description}=sectionSelected;return React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.swipeContainer},React.createElement("div",{className:styles.swipe})),React.createElement(UTLabel,{className:styles.title,variant:"title3"},title),React.createElement(UTLabel,{colorTheme:"gray",variant:"body",withMarkdown:!0},description))};Sheet.propTypes={sectionSelected:object};export default Sheet;
+import { object } from 'prop-types';
+import React from 'react';
+import UTLabel from '../../../UTLabel';
+import styles from './styles.module.scss';
+const Sheet = _ref => {
+  let {
+    sectionSelected
+  } = _ref;
+  const {
+    title,
+    description
+  } = sectionSelected;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.swipeContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.swipe
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.title,
+    variant: "title3"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "body",
+    withMarkdown: true
+  }, description));
+};
+Sheet.propTypes = {
+  sectionSelected: object
+};
+export default Sheet;

package/dist/esm/components/UTDocumentWizard/constants.js

@@ -1 +1,13 @@
-export const SLIDE_PROPS={style:{borderTopLeftRadius:"16px",borderTopRightRadius:"16px"}};export const LAST_OPTION_PROPS={style:{marginRight:"4px"}};export const NEXT="next";export const PREV="prev";
+export const SLIDE_PROPS = {
+  style: {
+    borderTopLeftRadius: '16px',
+    borderTopRightRadius: '16px'
+  }
+};
+export const LAST_OPTION_PROPS = {
+  style: {
+    marginRight: '4px'
+  }
+};
+export const NEXT = 'next';
+export const PREV = 'prev';