UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 15.3 kB
import {a}from'./chunk-ZZQLFO35.js';import {a as a$8}from'./chunk-ZPCWOA3Y.js';import {a as a$7}from'./chunk-DQVSIMLI.js';import {b}from'./chunk-B5IOSUX4.js';import {a as a$a}from'./chunk-KMEGIFKL.js';import {a as a$5}from'./chunk-QIOYMBBP.js';import {b as b$1}from'./chunk-33EFB3RJ.js';import {a as a$6}from'./chunk-JKO4EZPZ.js';import {a as a$9}from'./chunk-UXI6I6RZ.js';import {a as a$1}from'./chunk-I53W7VSB.js';import {a as a$2}from'./chunk-Z3CPR6GG.js';import {a as a$4}from'./chunk-LKQMBRKB.js';import {a as a$3}from'./chunk-MUJDE6SW.js';import {Anchor,DataCaptureView,Direction,Point,Size}from'@scandit/web-datacapture-core';import {Backdrop}from'@scandit/web-datacapture-core/build/js/private/ui/atoms/Backdrop.js';import {ScanditHTMLElement}from'@scandit/web-datacapture-core/build/js/private/utils/ScanditHTMLElement.js';import {css}from'@scandit/web-datacapture-core/build/js/private/utils/css.js';import {defineCustomElements}from'@scandit/web-datacapture-core/build/js/private/utils/defineCustomElements.js';import {calculateArea,calculateWidth,calculateHeight}from'@scandit/web-datacapture-core/build/js/private/utils/quadrilateralUtils.js';import {Timeout}from'@scandit/web-datacapture-core/build/js/private/utils/timeout.js';var W={async highlightForBarcode(E,T){let t=a$a.create(E);T(t);}},c=class c extends ScanditHTMLElement{constructor(){super(...arguments);this.torchIconButton=null;this.cameraSwitchButton=null;this.zoomButton=null;this.onTorchButtonClickHandler=this.onTorchButtonClick.bind(this);this.onCameraSwitchButtonHandler=this.onCameraSwitchButtonClick.bind(this);this.onZoomButtonHandler=this.onZoomButtonClick.bind(this);this.onLayoutPointerDownHandler=this.onLayoutPointerDown.bind(this);this.onInfoAnnotationTapHandler=this.onInfoAnnotationTap.bind(this);this.pendingDeletionTimeout=null;}set shouldShowZoomControl(t){this.zoomButton&&(this.zoomButton.hidden=!t);}get shouldShowZoomControl(){return this.zoomButton===null?false:!this.zoomButton.hidden}set shouldShowCameraSwitchControl(t){this.cameraSwitchButton&&(this.cameraSwitchButton.hidden=!t);}get shouldShowCameraSwitchControl(){return this.cameraSwitchButton===null?false:!this.cameraSwitchButton.hidden}set shouldShowTorchControl(t){this.torchIconButton!==null&&(this.torchIconButton.hidden=!t);}get shouldShowTorchControl(){return this.torchIconButton===null?false:!this.torchIconButton.hidden}set torchControlPosition(t){var e;(e=this.torchIconButton)==null||e.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.TopLeft:t}`);}get torchControlPosition(){var e,o;let t=(o=(e=this.torchIconButton)==null?void 0:e.getAttribute("slot"))!=null?o:"";return t===""?Anchor.TopLeft:t.replace("controls-","")}set zoomControlPosition(t){var e;(e=this.zoomButton)==null||e.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.BottomRight:t}`);}get zoomControlPosition(){var e,o;let t=(o=(e=this.zoomButton)==null?void 0:e.getAttribute("slot"))!=null?o:"";return t===""?Anchor.BottomRight:t.replace("controls-","")}set cameraSwitchControlPosition(t){var e;(e=this.cameraSwitchButton)==null||e.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.TopRight:t}`);}get cameraSwitchControlPosition(){var e,o;let t=(o=(e=this.zoomButton)==null?void 0:e.getAttribute("slot"))!=null?o:"";return t===""?Anchor.TopRight:t.replace("controls-","")}static async createWithSettings(t,e,o,i,n){c.register();let r=document.createElement(c.tag);return r.barcodeArViewSettings=i,r.layout=a.create(),r.append(r.layout),a$1(t)?(r.dataCaptureView=t,r.dataCaptureView.containerElement.prepend(r),await t.setContext(e)):(r.dataCaptureView=await DataCaptureView.forContext(e),r.dataCaptureView.connectToElement(t),r.dataCaptureView.containerElement.prepend(r)),r.presenter=new a$2(r,e,o,i,n!=null?n:a$3.createRecommendedCameraSettings()),await r.presenter.prepare(),r}static async create(t,e,o){return c.createWithSettings(t,e,o,new a$4)}static register(){defineCustomElements({[a.tag]:a,[a$8.tag]:a$8,[a$7.tag]:a$7,[a$6.tag]:a$6,[c.tag]:c,[Backdrop.tag]:Backdrop,[a$5.tag]:a$5});}static createStyleElement(){return css`[data-could-be-deleted=true]{display:none!important}[data-on-foreground=true]{z-index:3}${c.tag}{inset:0;position:absolute;z-index:1}`}async start(){return this.presenter.startSearching()}async stop(){return this.presenter.stopSearching()}async pause(){return this.presenter.pauseSearching()}reset(){this.deletePendingViews(),this.deleteAllViews();}getNotificationPresenter(){return this.dataCaptureView.getNotificationPresenter()}toggleTorchIcon(t){this.torchIconButton!==null&&(this.torchIconButton.state=t);}onTorchButtonClick(){this.presenter.onTorchButtonClicked();}onCameraSwitchButtonClick(){this.presenter.onCameraSwitchButtonClicked();}onZoomButtonClick(){this.presenter.onZoomButtonClicked();}changeZoomButtonIcon(t){this.zoomButton&&(this.zoomButton.zoom=`${t}x`);}connectedCallback(){this.torchIconButton=a$6.create(),this.torchIconButton.slot=`controls-${this.torchControlPosition}`,this.torchIconButton.hidden=true,this.torchIconButton.addEventListener("pointerdown",this.onTorchButtonClickHandler),this.cameraSwitchButton=a$8.create(),this.cameraSwitchButton.slot=`controls-${this.cameraSwitchControlPosition}`,this.cameraSwitchButton.hidden=true,this.cameraSwitchButton.addEventListener("pointerdown",this.onCameraSwitchButtonHandler),this.zoomButton=a$7.create(),this.zoomButton.slot=`controls-${this.zoomControlPosition}`,this.zoomButton.hidden=true,this.zoomButton.addEventListener("pointerdown",this.onZoomButtonHandler),this.layout.append(this.torchIconButton,this.cameraSwitchButton,this.zoomButton),this.layout.addEventListener("pointerdown",this.onLayoutPointerDownHandler),this.layout.addEventListener("BarcodeArInfoAnnotationEventTap",this.onInfoAnnotationTapHandler),this.backdrop=Backdrop.create(),this.layout.append(this.backdrop),this.pendingDeletionTimeout=new Timeout(1e3,()=>{this.deletePendingViews();}),this.prepend(c.createStyleElement());}disconnectedCallback(){var t,e,o;this.deleteAllViews(),(t=this.torchIconButton)==null||t.removeEventListener("pointerdown",this.onTorchButtonClickHandler),(e=this.cameraSwitchButton)==null||e.removeEventListener("pointerdown",this.onCameraSwitchButtonHandler),(o=this.zoomButton)==null||o.removeEventListener("pointerdown",this.onZoomButtonHandler),this.layout.removeEventListener("pointerdown",this.onLayoutPointerDownHandler),this.layout.removeEventListener("BarcodeArInfoAnnotationEventTap",this.onInfoAnnotationTapHandler);}isPopoverAnnotation(t){return t instanceof b}isAnnotation(t){var e;return ((e=t.dataset)==null?void 0:e.identifier)==null?false:t.dataset.identifier.endsWith("-annotation")}areMultiplePopoverAllowed(){for(let t of this.layout.querySelectorAll("[data-identifier$='-annotation']"))if(t&&this.isPopoverAnnotation(t)&&t.annotationTrigger==="highlightTapAndBarcodeScan")return true;return false}async onLayoutPointerDown(t){let e=t.target,o=e==null?void 0:e.closest("[data-identifier$='-highlight']"),i=e==null?void 0:e.closest(b.tag);if((o==null?void 0:o.dataset.id)!=null){await this.handleHighlightClick(o);return}if((i==null?void 0:i.dataset.id)!=null){await this.handleAnnotationClick(i);return}await this.handleClickOutside();}async handleHighlightClick(t){var o;this.presenter.emitTappedFeedback(),(o=this.listener)==null||o.didTapHighlightForBarcode(this.presenter.barcodeAr,t.barcode,t);let e=this.queryAnnotationByDataIdentifier(t.dataset.identifier.replace("-highlight",""));!e||e.annotationTrigger==="barcodeScan"||(this.isPopoverAnnotation(e)?await this.handlePopoverHighlightClick(e,t):e.hidden=!e.hidden);}async handlePopoverHighlightClick(t,e){var o;if(!this.areMultiplePopoverAllowed()){let i=this.layout.querySelector(`${b.tag}[data-on-foreground="true"]`),n=(o=i==null?void 0:i.dataset.identifier)==null?void 0:o.replace("-annotation","-highlight"),r=this.layout.querySelector(`[data-identifier="${n}"]`);i!=null&&r!=null&&await this.hideBarcodeArPopover(i,r,false);}await this.toggleBarcodeArPopover(t,e);}async handleAnnotationClick(t){var i;let e=(i=t.dataset.identifier)==null?void 0:i.replace("-annotation","-highlight"),o=this.layout.querySelector(`[data-identifier="${e}"]`);o&&await this.toggleBarcodeArPopover(t,o);}async handleClickOutside(){var i;if(this.areMultiplePopoverAllowed())return;let t=this.layout.querySelector(`${b.tag}[data-on-foreground="true"]`);if(!t)return;let e=(i=t.dataset.identifier)==null?void 0:i.replace("-annotation","-highlight"),o=this.layout.querySelector(`[data-identifier="${e}"]`);o&&await this.hideBarcodeArPopover(t,o);}onInfoAnnotationTap(){this.presenter.emitTappedFeedback();}async showBarcodeArPopover(t,e){t.dataset.onForeground="true",t.hidden=false,e.dataset.onForeground="true",this.backdrop.open=true;}async hideBarcodeArPopover(t,e,o=true){t.dataset.onForeground="false",t.hidden=true,e&&(e.dataset.onForeground="false"),o&&this.hideBackdropIfNoPopovers();}hideBackdropIfNoPopovers(){[...this.layout.querySelectorAll(`${b.tag}`)].every(e=>e.hidden)&&(this.backdrop.open=false);}async toggleBarcodeArPopover(t,e){t.hidden?await this.showBarcodeArPopover(t,e):await this.hideBarcodeArPopover(t,e);}deleteAllViews(){for(let t of this.layout.querySelectorAll("[data-identifier]"))t.remove();}deletePendingViews(){for(let t of this.layout.querySelectorAll("[data-could-be-deleted='true']"))t.remove();this.hideBackdropIfNoPopovers();}identifierForHighlight(t){return `${t}-highlight`}identifierForAnnotation(t){return `${t}-annotation`}async onHighlightsOrAnnotationForTrackedBarcode(t){var e,o,i;await((o=(e=this.highlightProvider)!=null?e:W)==null?void 0:o.highlightForBarcode(t.barcode,async n=>this.onHighlight(t,n))),await((i=this.annotationProvider)==null?void 0:i.annotationForBarcode(t.barcode,async n=>this.onAnnotation(t,n)));}async onAnnotation(t,e){let o=e,i=a$9(t);this.updateExistingAnnotation(i)||(await this.setupNewAnnotation(o,i,t),this.updateAnnotationPosition(t,o));}updateExistingAnnotation(t){let e=this.queryAnnotationByDataId(t);return e?(e.dataset.couldBeDeleted="false",true):false}async setupNewAnnotation(t,e,o){if(t.dataset.id=e,t.dataset.identifier=this.identifierForAnnotation(o.identifier),t.hidden=true,this.layout.append(t),this.isPopoverAnnotation(t)){if(t.direction=Direction.Vertical,t.anchor==null&&(t.anchor="bottom-center"),this.areMultiplePopoverAllowed()||t.annotationTrigger==="highlightTapAndBarcodeScan"){let i=this.queryHighlightByDataId(e);i&&await this.showBarcodeArPopover(t,i);}}else t.hidden=t.annotationTrigger==="highlightTap";}getAnnotationVariationForQuad(t,e){let o=Math.max(0,Math.min(1,e)),i=t.anchorPositions,n=calculateArea(i),r=this.dataCaptureView.width,l=this.dataCaptureView.height,d=r*l;if(n<=0||d<=0)return 0;let u=n/d;return Math.max(0,Math.min(1,u))<=o?2:1}async onHighlight(t,e){let o=a$9(t),i=this.queryHighlightByDataId(o);i?i.dataset.couldBeDeleted="false":(e.dataset.id=o,e.dataset.identifier=this.identifierForHighlight(t.identifier),this.updateHighlightPosition(t,e),this.layout.append(e));}queryHighlightByDataIdentifier(t){return this.layout.querySelector(`[data-identifier$="${t}-highlight"]`)}queryAnnotationByDataIdentifier(t){return this.layout.querySelector(`[data-identifier$="${t}-annotation"]`)}queryHighlightByDataId(t){return this.layout.querySelector(`[data-identifier$="-highlight"][data-id="${t}"]`)}queryAnnotationByDataId(t){return this.layout.querySelector(`[data-identifier$="-annotation"][data-id="${t}"]`)}updateRemovedTrackedBarcodes(t){var i,n,r,l,d;let e=this.querySelectorAll("[data-identifier]");if(Object.keys(t.allTrackedBarcodes).length===0){for(let u of e)u.dataset.couldBeDeleted="true";(i=this.pendingDeletionTimeout)!=null&&i.running||(n=this.pendingDeletionTimeout)==null||n.start();return}let o=new Set(t.removedTrackedBarcodes);for(let u of e){let p=(r=u.dataset.identifier)==null?void 0:r.replace("-highlight","").replace("-annotation","");p!=null&&o.has(p)&&(u.dataset.couldBeDeleted="true");}(l=this.pendingDeletionTimeout)!=null&&l.running||(d=this.pendingDeletionTimeout)==null||d.start();}render(t){for(let[e,o]of Object.entries(t.allTrackedBarcodes)){t.addedTrackedBarcodes[e]!=null&&this.onHighlightsOrAnnotationForTrackedBarcode(o);let i=a$9(o),n=this.queryAnnotationByDataId(i),r=this.queryHighlightByDataId(i);r&&(this.updateBrushSize(r,o),this.updateHighlightPosition(o,r)),n&&this.updateAnnotationPosition(o,n,r);}this.updateRemovedTrackedBarcodes(t);}updateHighlightPosition(t,e,o="center"){if(e.hidden)return;let i=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions),n=this.normalizedViewPointFromFrameAnchorPositions(i,o);e.updatePosition(n,new Point(-50,-50),this.calculateRotationAngle(i.topLeft,i.topRight));}updateBrushSize(t,e){if(t.width==null||t.height==null)return;let o=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions),i=Math.round(calculateWidth(o)),n=Math.round(calculateHeight(o));t.width!==i&&(t.width=i),t.height!==n&&(t.height=n);}getTransformOrigin(t){return {"top-center":new Point(-50,0),"bottom-center":new Point(-50,-100),"left-center":new Point(0,-50),"right-center":new Point(-100,-50)}[t]}calculateAnnotationPosition(t,e,o){var p,w;let n=t.orderVerticesByPosition(),r=this.normalizedViewPointFromFrameAnchorPositions(t,"center"),d={"bottom-center":()=>{let s=this.normalizedViewPointFromFrameAnchorPositions(n,"topCenter");return new Point(s.x,s.y-7)},"top-center":()=>{let s=this.normalizedViewPointFromFrameAnchorPositions(n,"bottomCenter");return new Point(s.x,s.y+7)},"right-center":()=>{let s=this.normalizedViewPointFromFrameAnchorPositions(n,"centerLeft");return new Point(s.x-7,s.y)},"left-center":()=>{let s=this.normalizedViewPointFromFrameAnchorPositions(n,"centerRight");return new Point(s.x+7,s.y)}}[e]();return o?o instanceof b$1?(p={"bottom-center":new Point(r.x,r.y-7-o.clientHeight/2),"top-center":new Point(r.x,r.y+7+o.clientHeight/2),"right-center":new Point(r.x-7-o.clientWidth/2,r.y),"left-center":new Point(r.x+7+o.clientWidth/2,r.y)}[e])!=null?p:d:(w={"bottom-center":new Point(r.x,r.y-7-o.clientHeight/2),"top-center":new Point(r.x,r.y+7+o.clientHeight/2),"right-center":new Point(r.x-7-o.clientWidth/2,r.y),"left-center":new Point(r.x+7+o.clientWidth/2,r.y)}[e])!=null?w:d:d}updateAnnotationPosition(t,e,o){let i=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions);if(e.anchor||(e.anchor="top-center"),e.annotationVariation!=null){let l=this.getAnnotationVariationForQuad(t,a$5.threshold);e.annotationVariation=l;}let n=this.getTransformOrigin(e.anchor),r=this.calculateAnnotationPosition(i,e.anchor,o);e.updatePosition(r,n,this.calculateRotationAngle(i.topLeft,i.topRight));}normalizedViewPointFromFrameAnchorPositions(t,e="center"){let o=this.presenter.currentCamera.getMirrorImageEnabled(),i=new Size(this.dataCaptureView.width,this.dataCaptureView.height);if(o){let r=t[{centerLeft:"centerRight",centerRight:"centerLeft",center:"center",topCenter:"topCenter",bottomCenter:"bottomCenter"}[e]];return Point.mirrorX(r,i)}return t[e]}calculateRotationAngle(t,e){let o=e.x-t.x,n=this.presenter.isCameraMirrored()?-(e.y-t.y):e.y-t.y,r=Math.atan2(n,o);return Math.round(r*(180/Math.PI))}};c.tag="scandit-barcode-ar-view";var k=c;export{k as a};