@scandit/web-datacapture-barcode/build/js/ar/BarcodeArView.js

Scandit Data Capture SDK for the Web

import{isDataCaptureView as e}from"../private/isDataCaptureView.js";import{BarcodeAr as t}from"./BarcodeAr.js";import{BarcodeArPresenter as n}from"./BarcodeArPresenter.js";import{BarcodeArViewSettings as r}from"./BarcodeArViewSettings.js";import{hashedId as i}from"./hashedId.js";import{CameraSwitchButton as a}from"./ui/molecules/private/CameraSwitchButton.js";import"./ui/organisms/BarcodeArAnnotation.js";import"./ui/organisms/BarcodeArInfoAnnotation.js";import{BarcodeArPopoverAnnotation as o}from"./ui/organisms/BarcodeArPopoverAnnotation.js";import{CheckLayout as s}from"./ui/organisms/private/CheckLayout.js";import{BarcodeArCircleHighlight as c}from"./ui/organisms/BarcodeArCircleHighlight.js";import{BarcodeArRectangleHighlight as l}from"./ui/organisms/BarcodeArRectangleHighlight.js";import"./ui/organisms/private/BarcodeArAnnotationVariation.js";import{BarcodeArResponsiveAnnotation as u}from"./ui/organisms/BarcodeArResponsiveAnnotation.js";import{Anchor as d,DataCaptureView as f,Direction as p,Point as m,Size as h,ZoomSwitchControl as g}from"@scandit/web-datacapture-core";import{Timeout as _}from"@scandit/web-datacapture-core/build/js/private/utils/timeout.js";import{ScanditHTMLElement as v}from"@scandit/web-datacapture-core/build/js/private/utils/ScanditHTMLElement.js";import{defineCustomElements as y}from"@scandit/web-datacapture-core/build/js/private/utils/defineCustomElements.js";import{TorchSwitchIconButton as b}from"@scandit/web-datacapture-core/build/js/private/ui/molecules/TorchSwitchIconButton.js";import{Backdrop as x}from"@scandit/web-datacapture-core/build/js/private/ui/atoms/Backdrop.js";import{css as S}from"@scandit/web-datacapture-core/build/js/private/utils/css.js";import{calculateArea as C,calculateHeight as w,calculateWidth as T}from"@scandit/web-datacapture-core/build/js/private/utils/quadrilateralUtils.js";const E={async highlightForBarcode(e,t){t(l.create(e))}};var D=class l extends v{constructor(...e){super(...e),this.torchSwitchIconButton=null,this.cameraSwitchButton=null,this.zoomSwitchControl=null,this._shouldShowTorchControl=!1,this._isTorchAvailable=!1,this.onTorchButtonClickHandler=this.onTorchButtonClick.bind(this),this.onCameraSwitchButtonHandler=this.onCameraSwitchButtonClick.bind(this),this.onLayoutPointerDownHandler=this.onLayoutPointerDown.bind(this),this.onInfoAnnotationTapHandler=this.onInfoAnnotationTap.bind(this),this.pendingDeletionTimeout=null}set shouldShowZoomControl(e){var t;let n=(t=this.zoomSwitchControl)==null?void 0:t.zoomSwitchPill;n&&(n.hidden=!e)}get shouldShowZoomControl(){var e;let t=(e=this.zoomSwitchControl)==null?void 0:e.zoomSwitchPill;return t?!t.hidden:!1}set shouldShowCameraSwitchControl(e){this.cameraSwitchButton&&(this.cameraSwitchButton.hidden=!e)}get shouldShowCameraSwitchControl(){return this.cameraSwitchButton===null?!1:!this.cameraSwitchButton.hidden}set shouldShowTorchControl(e){this.torchSwitchIconButton!==null&&(this._shouldShowTorchControl=e,this.torchSwitchIconButton.hidden=!(e&&this._isTorchAvailable))}get shouldShowTorchControl(){return this._shouldShowTorchControl}set torchControlPosition(e){var t;(t=this.torchSwitchIconButton)==null||t.setAttribute(`slot`,`controls-${e===d.Center?d.TopLeft:e}`)}get torchControlPosition(){var e;let t=((e=this.torchSwitchIconButton)==null?void 0:e.getAttribute(`slot`))??``;return t===``?d.TopLeft:t.replace(`controls-`,``)}set zoomControlPosition(e){var t;let n=(t=this.zoomSwitchControl)==null?void 0:t.zoomSwitchPill;n==null||n.setAttribute(`slot`,`controls-${e===d.Center?d.BottomRight:e}`)}get zoomControlPosition(){var e;let t=(e=this.zoomSwitchControl)==null?void 0:e.zoomSwitchPill,n=(t==null?void 0:t.getAttribute(`slot`))??``;return n===``?d.BottomRight:n.replace(`controls-`,``)}set cameraSwitchControlPosition(e){var t;(t=this.cameraSwitchButton)==null||t.setAttribute(`slot`,`controls-${e===d.Center?d.TopRight:e}`)}get cameraSwitchControlPosition(){var e;let t=((e=this.cameraSwitchButton)==null?void 0:e.getAttribute(`slot`))??``;return t===``?d.TopRight:t.replace(`controls-`,``)}get logoStyle(){return this.dataCaptureView.logoStyle}set logoStyle(e){this.dataCaptureView.logoStyle=e}get logoAnchor(){return this.dataCaptureView.logoAnchor}set logoAnchor(e){this.dataCaptureView.logoAnchor=e}get logoOffset(){return this.dataCaptureView.logoOffset}set logoOffset(e){this.dataCaptureView.logoOffset=e}static async createWithSettings(r,i,a,o,c){l.register();let u=document.createElement(l.tag);return u.barcodeArViewSettings=o,u.layout=s.create(),u.append(u.layout),e(r)?(u.dataCaptureView=r,u.dataCaptureView.containerElement.prepend(u),await r.setContext(i)):(u.dataCaptureView=await f.forContext(i),u.dataCaptureView.connectToElement(r),u.dataCaptureView.containerElement.prepend(u)),u.presenter=new n(u,i,a,o,c??t.createRecommendedCameraSettings()),await u.presenter.prepare(),await u.installZoomControl(),u}static async create(e,t,n){return l.createWithSettings(e,t,n,new r)}static register(){y({[s.tag]:s,[a.tag]:a,[b.tag]:b,[l.tag]:l,[x.tag]:x,[u.tag]:u})}static createStyleElement(){return S`[data-could-be-deleted=true]{display:none!important}[data-on-foreground=true]{z-index:3}${l.tag}{inset:0;position:absolute;z-index:1}`}getHighlightForBarcode(e){return this.queryHighlightByDataId(i(e))}getAnnotationForBarcode(e){return this.queryAnnotationByDataId(i(e))}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()}setTorchAvailable(e){this._isTorchAvailable=e,this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.hidden=!(this._shouldShowTorchControl&&this._isTorchAvailable))}toggleTorchIcon(e){this.torchSwitchIconButton!==null&&(this.torchSwitchIconButton.state=e)}onTorchButtonClick(){this.presenter.onTorchButtonClicked()}onCameraSwitchButtonClick(){this.presenter.onCameraSwitchButtonClicked()}async installZoomControl(){this.zoomSwitchControl=new g,await this.zoomSwitchControl.install(this.dataCaptureView);let e=this.zoomSwitchControl.zoomSwitchPill;e&&(e.setAttribute(`slot`,`controls-${d.BottomRight}`),e.hidden=!0,this.layout.append(e))}connectedCallback(){this.torchSwitchIconButton=b.create(),this.torchSwitchIconButton.shadow=!0,this.torchSwitchIconButton.size=36,this.torchSwitchIconButton.slot=`controls-${this.torchControlPosition}`,this.torchSwitchIconButton.hidden=!0,this.torchSwitchIconButton.addEventListener(`pointerdown`,this.onTorchButtonClickHandler),this.cameraSwitchButton=a.create(),this.cameraSwitchButton.slot=`controls-${this.cameraSwitchControlPosition}`,this.cameraSwitchButton.hidden=!0,this.cameraSwitchButton.addEventListener(`pointerdown`,this.onCameraSwitchButtonHandler),this.layout.append(this.torchSwitchIconButton,this.cameraSwitchButton),this.layout.addEventListener(`pointerdown`,this.onLayoutPointerDownHandler),this.layout.addEventListener(`BarcodeArInfoAnnotationEventTap`,this.onInfoAnnotationTapHandler),this.backdrop=x.create(),this.layout.append(this.backdrop),this.pendingDeletionTimeout=new _(1e3,()=>{this.deletePendingViews()}),this.prepend(l.createStyleElement())}disconnectedCallback(){var e,t,n;this.deleteAllViews(),(e=this.torchSwitchIconButton)==null||e.removeEventListener(`pointerdown`,this.onTorchButtonClickHandler),(t=this.cameraSwitchButton)==null||t.removeEventListener(`pointerdown`,this.onCameraSwitchButtonHandler),(n=this.zoomSwitchControl)==null||n.remove(),this.layout.removeEventListener(`pointerdown`,this.onLayoutPointerDownHandler),this.layout.removeEventListener(`BarcodeArInfoAnnotationEventTap`,this.onInfoAnnotationTapHandler)}isPopoverAnnotation(e){return e instanceof o}isAnnotation(e){var t;return((t=e.dataset)==null?void 0:t.identifier)==null?!1:e.dataset.identifier.endsWith(`-annotation`)}areMultiplePopoverAllowed(){for(let e of this.layout.querySelectorAll(`[data-identifier$='-annotation']`))if(e&&this.isPopoverAnnotation(e)&&e.annotationTrigger===`highlightTapAndBarcodeScan`)return!0;return!1}async onLayoutPointerDown(e){let t=e.target,n=t==null?void 0:t.closest(`[data-identifier$='-highlight']`),r=t==null?void 0:t.closest(o.tag);if((n==null?void 0:n.dataset.id)!=null){await this.handleHighlightClick(n);return}if((r==null?void 0:r.dataset.id)!=null){await this.handleAnnotationClick(r);return}await this.handleClickOutside()}async handleHighlightClick(e){var t;this.presenter.emitTappedFeedback(),(t=this.listener)==null||t.didTapHighlightForBarcode(this.presenter.barcodeAr,e.barcode,e);let n=this.queryAnnotationByDataIdentifier(e.dataset.identifier.replace(`-highlight`,``));!n||n.annotationTrigger===`barcodeScan`||(this.isPopoverAnnotation(n)?await this.handlePopoverHighlightClick(n,e):n.hidden=!n.hidden)}async handlePopoverHighlightClick(e,t){if(!this.areMultiplePopoverAllowed()){var n;let e=this.layout.querySelector(`${o.tag}[data-on-foreground="true"]`),t=e==null||(n=e.dataset.identifier)==null?void 0:n.replace(`-annotation`,`-highlight`),r=this.layout.querySelector(`[data-identifier="${t}"]`);e!=null&&r!=null&&await this.hideBarcodeArPopover(e,r,!1)}await this.toggleBarcodeArPopover(e,t)}async handleAnnotationClick(e){var t;let n=(t=e.dataset.identifier)==null?void 0:t.replace(`-annotation`,`-highlight`),r=this.layout.querySelector(`[data-identifier="${n}"]`);r&&await this.toggleBarcodeArPopover(e,r)}async handleClickOutside(){var e;if(this.areMultiplePopoverAllowed())return;let t=this.layout.querySelector(`${o.tag}[data-on-foreground="true"]`);if(!t)return;let n=(e=t.dataset.identifier)==null?void 0:e.replace(`-annotation`,`-highlight`),r=this.layout.querySelector(`[data-identifier="${n}"]`);r&&await this.hideBarcodeArPopover(t,r)}onInfoAnnotationTap(){this.presenter.emitTappedFeedback()}async showBarcodeArPopover(e,t){e.dataset.onForeground=`true`,e.hidden=!1,t.dataset.onForeground=`true`,this.backdrop.open=!0}async hideBarcodeArPopover(e,t,n=!0){e.dataset.onForeground=`false`,e.hidden=!0,t&&(t.dataset.onForeground=`false`),n&&this.hideBackdropIfNoPopovers()}hideBackdropIfNoPopovers(){[...this.layout.querySelectorAll(`${o.tag}`)].every(e=>e.hidden)&&(this.backdrop.open=!1)}async toggleBarcodeArPopover(e,t){e.hidden?await this.showBarcodeArPopover(e,t):await this.hideBarcodeArPopover(e,t)}deleteAllViews(){for(let e of this.layout.querySelectorAll(`[data-identifier]`))e.remove()}deletePendingViews(){for(let e of this.layout.querySelectorAll(`[data-could-be-deleted='true']`))e.remove();this.hideBackdropIfNoPopovers()}identifierForHighlight(e){return`${e}-highlight`}identifierForAnnotation(e){return`${e}-annotation`}async onHighlightsOrAnnotationForTrackedBarcode(e){var t,n;await((t=this.highlightProvider??E)==null?void 0:t.highlightForBarcode(e.barcode,async t=>this.onHighlight(e,t))),await((n=this.annotationProvider)==null?void 0:n.annotationForBarcode(e.barcode,async t=>this.onAnnotation(e,t)))}async onAnnotation(e,t){let n=t,r=i(e.barcode);this.updateExistingAnnotation(r)||(await this.setupNewAnnotation(n,r,e),this.updateAnnotationPosition(e,n))}updateExistingAnnotation(e){let t=this.queryAnnotationByDataId(e);return t?(t.dataset.couldBeDeleted=`false`,!0):!1}async setupNewAnnotation(e,t,n){if(e.dataset.id=t,e.dataset.identifier=this.identifierForAnnotation(n.identifier),e.hidden=!0,this.layout.append(e),this.isPopoverAnnotation(e)){if(e.direction=p.Vertical,e.anchor??=`bottom-center`,this.areMultiplePopoverAllowed()||e.annotationTrigger===`highlightTapAndBarcodeScan`){let n=this.queryHighlightByDataId(t);n&&await this.showBarcodeArPopover(e,n)}}else e.hidden=e.annotationTrigger===`highlightTap`}getAnnotationVariationForQuad(e,t){let n=Math.max(0,Math.min(1,t)),r=e.anchorPositions,i=C(r),a=this.dataCaptureView.width*this.dataCaptureView.height;if(i<=0||a<=0)return 0;let o=i/a;return Math.max(0,Math.min(1,o))<=n?2:1}async onHighlight(e,t){let n=i(e.barcode),r=this.queryHighlightByDataId(n);r?r.dataset.couldBeDeleted=`false`:(t.dataset.id=n,t.dataset.identifier=this.identifierForHighlight(e.identifier),this.updateHighlightPosition(e,t),this.layout.append(t))}queryHighlightByDataIdentifier(e){return this.layout.querySelector(`[data-identifier$="${e}-highlight"]`)}queryAnnotationByDataIdentifier(e){return this.layout.querySelector(`[data-identifier$="${e}-annotation"]`)}queryHighlightByDataId(e){return this.layout.querySelector(`[data-identifier$="-highlight"][data-id="${e}"]`)}queryAnnotationByDataId(e){return this.layout.querySelector(`[data-identifier$="-annotation"][data-id="${e}"]`)}updateRemovedTrackedBarcodes(e){var t;let n=this.querySelectorAll(`[data-identifier]`);if(Object.keys(e.allTrackedBarcodes).length===0){var r;for(let e of n)e.dataset.couldBeDeleted=`true`;if(!((r=this.pendingDeletionTimeout)!=null&&r.running)){var i;(i=this.pendingDeletionTimeout)==null||i.start()}return}let a=new Set(e.removedTrackedBarcodes);for(let e of n){var o;let t=(o=e.dataset.identifier)==null?void 0:o.replace(`-highlight`,``).replace(`-annotation`,``);t!=null&&a.has(t)&&(e.dataset.couldBeDeleted=`true`)}if(!((t=this.pendingDeletionTimeout)!=null&&t.running)){var s;(s=this.pendingDeletionTimeout)==null||s.start()}}render(e){for(let[t,n]of Object.entries(e.allTrackedBarcodes)){e.addedTrackedBarcodes[t]!=null&&this.onHighlightsOrAnnotationForTrackedBarcode(n);let r=i(n.barcode),a=this.queryAnnotationByDataId(r),o=this.queryHighlightByDataId(r);o&&(this.updateBrushSize(o,n),this.updateHighlightPosition(n,o)),a&&this.updateAnnotationPosition(n,a,o)}this.updateRemovedTrackedBarcodes(e)}updateHighlightPosition(e,t,n=`center`){if(t.hidden)return;let r=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions),i=this.normalizedViewPointFromFrameAnchorPositions(r,n);t.updatePosition(i,new m(-50,-50),this.calculateRotationAngle(r.topLeft,r.topRight))}updateBrushSize(e,t){if(e.width==null||e.height==null)return;let n=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions),r=Math.round(T(n)),i=Math.round(w(n));e.width!==r&&(e.width=r),e.height!==i&&(e.height=i)}getTransformOrigin(e){return{"top-center":new m(-50,0),"bottom-center":new m(-50,-100),"left-center":new m(0,-50),"right-center":new m(-100,-50)}[e]}calculateAnnotationPosition(e,t,n){let r=e.orderVerticesByPosition(),i=this.normalizedViewPointFromFrameAnchorPositions(e,`center`),a={"bottom-center":()=>{let e=this.normalizedViewPointFromFrameAnchorPositions(r,`topCenter`);return new m(e.x,e.y-7)},"top-center":()=>{let e=this.normalizedViewPointFromFrameAnchorPositions(r,`bottomCenter`);return new m(e.x,e.y+7)},"right-center":()=>{let e=this.normalizedViewPointFromFrameAnchorPositions(r,`centerLeft`);return new m(e.x-7,e.y)},"left-center":()=>{let e=this.normalizedViewPointFromFrameAnchorPositions(r,`centerRight`);return new m(e.x+7,e.y)}}[t]();return n?(n instanceof c,{"bottom-center":new m(i.x,i.y-7-n.clientHeight/2),"top-center":new m(i.x,i.y+7+n.clientHeight/2),"right-center":new m(i.x-7-n.clientWidth/2,i.y),"left-center":new m(i.x+7+n.clientWidth/2,i.y)}[t]??a):a}updateAnnotationPosition(e,t,n){let r=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(e.anchorPositions);t.anchor||=`top-center`,t.annotationVariation!=null&&(t.annotationVariation=this.getAnnotationVariationForQuad(e,u.threshold));let i=this.getTransformOrigin(t.anchor),a=this.calculateAnnotationPosition(r,t.anchor,n);t.updatePosition(a,i,this.calculateRotationAngle(r.topLeft,r.topRight))}normalizedViewPointFromFrameAnchorPositions(e,t=`center`){let n=this.presenter.currentCamera.getMirrorImageEnabled(),r=new h(this.dataCaptureView.width,this.dataCaptureView.height);if(n){let n=e[{centerLeft:`centerRight`,centerRight:`centerLeft`,center:`center`,topCenter:`topCenter`,bottomCenter:`bottomCenter`}[t]];return m.mirrorX(n,r)}return e[t]}calculateRotationAngle(e,t){let n=t.x-e.x,r=this.presenter.isCameraMirrored()?-(t.y-e.y):t.y-e.y;return Math.round(180/Math.PI*Math.atan2(r,n))}};D.tag=`scandit-barcode-ar-view`;export{D as BarcodeArView};