UNPKG

@scandit/web-datacapture-barcode

Version:

Scandit Data Capture SDK for the Web

1 lines 14.5 kB
import {a as a$7}from'./chunk-ZPCWOA3Y.js';import {a as a$6}from'./chunk-DQVSIMLI.js';import {a}from'./chunk-ZZQLFO35.js';import {b}from'./chunk-DGF7ODRH.js';import {a as a$9}from'./chunk-GBKJMQMZ.js';import {b as b$1}from'./chunk-4KRKVW3B.js';import {a as a$5}from'./chunk-7GJVUU3G.js';import {a as a$8}from'./chunk-NDQSQK6H.js';import {a as a$1}from'./chunk-I53W7VSB.js';import {a as a$2}from'./chunk-Q3JVHEAS.js';import {a as a$4}from'./chunk-LKQMBRKB.js';import {a as a$3}from'./chunk-WPRAOUF3.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 {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 q={async highlightForBarcode(R,w){let t=a$9.create(R);w(t);}},d=class d 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 o;(o=this.torchIconButton)==null||o.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.TopLeft:t}`);}get torchControlPosition(){var o,e;let t=(e=(o=this.torchIconButton)==null?void 0:o.getAttribute("slot"))!=null?e:"";return t===""?Anchor.TopLeft:t.replace("controls-","")}set zoomControlPosition(t){var o;(o=this.zoomButton)==null||o.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.BottomRight:t}`);}get zoomControlPosition(){var o,e;let t=(e=(o=this.zoomButton)==null?void 0:o.getAttribute("slot"))!=null?e:"";return t===""?Anchor.BottomRight:t.replace("controls-","")}set cameraSwitchControlPosition(t){var o;(o=this.cameraSwitchButton)==null||o.setAttribute("slot",`controls-${t===Anchor.Center?Anchor.TopRight:t}`);}get cameraSwitchControlPosition(){var o,e;let t=(e=(o=this.zoomButton)==null?void 0:o.getAttribute("slot"))!=null?e:"";return t===""?Anchor.TopRight:t.replace("controls-","")}static async createWithSettings(t,o,e,r,n){d.register();let i=document.createElement(d.tag);return i.barcodeArViewSettings=r,i.layout=a.create(),i.append(i.layout),a$1(t)?(i.dataCaptureView=t,i.dataCaptureView.containerElement.prepend(i),await t.setContext(o)):(i.dataCaptureView=await DataCaptureView.forContext(o),i.dataCaptureView.connectToElement(t),i.dataCaptureView.containerElement.prepend(i)),i.presenter=new a$2(i,o,e,r,n!=null?n:a$3.createRecommendedCameraSettings()),await i.presenter.prepare(),i}static async create(t,o,e){return d.createWithSettings(t,o,e,new a$4)}static register(){defineCustomElements({[a.tag]:a,[a$7.tag]:a$7,[a$6.tag]:a$6,[a$5.tag]:a$5,[d.tag]:d,[Backdrop.tag]:Backdrop});}static createStyleElement(){return css`[data-could-be-deleted=true]{display:none!important}[data-on-foreground=true]{z-index:3}${d.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();}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$5.create(),this.torchIconButton.slot=`controls-${this.torchControlPosition}`,this.torchIconButton.hidden=true,this.torchIconButton.addEventListener("pointerdown",this.onTorchButtonClickHandler),this.cameraSwitchButton=a$7.create(),this.cameraSwitchButton.slot=`controls-${this.cameraSwitchControlPosition}`,this.cameraSwitchButton.hidden=true,this.cameraSwitchButton.addEventListener("pointerdown",this.onCameraSwitchButtonHandler),this.zoomButton=a$6.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(d.createStyleElement());}disconnectedCallback(){var t,o,e;this.deleteAllViews(),(t=this.torchIconButton)==null||t.removeEventListener("pointerdown",this.onTorchButtonClickHandler),(o=this.cameraSwitchButton)==null||o.removeEventListener("pointerdown",this.onCameraSwitchButtonHandler),(e=this.zoomButton)==null||e.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 o;return ((o=t.dataset)==null?void 0:o.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 o=t.target,e=o==null?void 0:o.closest("[data-identifier$='-highlight']"),r=o==null?void 0:o.closest(b.tag);if((e==null?void 0:e.dataset.id)!=null){await this.handleHighlightClick(e);return}if((r==null?void 0:r.dataset.id)!=null){await this.handleAnnotationClick(r);return}await this.handleClickOutside();}async handleHighlightClick(t){this.presenter.emitTappedFeedback();let o=this.queryAnnotationByDataIdentifier(t.dataset.identifier.replace("-highlight",""));o&&(this.isPopoverAnnotation(o)?await this.handlePopoverHighlightClick(o,t):o.hidden=!o.hidden);}async handlePopoverHighlightClick(t,o){var e;if(!this.areMultiplePopoverAllowed()){let r=this.layout.querySelector(`${b.tag}[data-on-foreground="true"]`),n=(e=r==null?void 0:r.dataset.identifier)==null?void 0:e.replace("-annotation","-highlight"),i=this.layout.querySelector(`[data-identifier="${n}"]`);r!=null&&i!=null&&await this.hideBarcodeArPopover(r,i,false);}await this.toggleBarcodeArPopover(t,o);}async handleAnnotationClick(t){var r;let o=(r=t.dataset.identifier)==null?void 0:r.replace("-annotation","-highlight"),e=this.layout.querySelector(`[data-identifier="${o}"]`);e&&await this.toggleBarcodeArPopover(t,e);}async handleClickOutside(){var r;if(this.areMultiplePopoverAllowed())return;let t=this.layout.querySelector(`${b.tag}[data-on-foreground="true"]`);if(!t)return;let o=(r=t.dataset.identifier)==null?void 0:r.replace("-annotation","-highlight"),e=this.layout.querySelector(`[data-identifier="${o}"]`);e&&await this.hideBarcodeArPopover(t,e);}onInfoAnnotationTap(){this.presenter.emitTappedFeedback();}async showBarcodeArPopover(t,o){t.dataset.onForeground="true",t.hidden=false,o.dataset.onForeground="true",this.backdrop.open=true;}async hideBarcodeArPopover(t,o,e=true){t.dataset.onForeground="false",t.hidden=true,o&&(o.dataset.onForeground="false"),e&&this.hideBackdropIfNoPopovers();}hideBackdropIfNoPopovers(){[...this.layout.querySelectorAll(`${b.tag}`)].every(o=>o.hidden)&&(this.backdrop.open=false);}async toggleBarcodeArPopover(t,o){t.hidden?await this.showBarcodeArPopover(t,o):await this.hideBarcodeArPopover(t,o);}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 o,e,r;await((e=(o=this.highlightProvider)!=null?o:q)==null?void 0:e.highlightForBarcode(t.barcode,async n=>this.onHighlight(t,n))),await((r=this.annotationProvider)==null?void 0:r.annotationForBarcode(t.barcode,async n=>this.onAnnotation(t,n)));}async onAnnotation(t,o){let e=o,r=a$8(t),n=this.queryAnnotationByDataId(r);if(n)n.dataset.couldBeDeleted="false";else {if(e.dataset.id=r,e.dataset.identifier=this.identifierForAnnotation(t.identifier),e.hidden=true,this.layout.append(e),this.isPopoverAnnotation(e)){if(e.direction=Direction.Vertical,e.anchor==null&&(e.anchor="bottom-center"),this.areMultiplePopoverAllowed()||e.annotationTrigger==="highlightTapAndBarcodeScan"){let i=this.queryHighlightByDataId(r);if(!i)return;this.showBarcodeArPopover(e,i);}}else {let i=e;i.hidden=i.annotationTrigger==="highlightTap";}this.updateAnnotationPosition(t,e);}}async onHighlight(t,o){let e=a$8(t),r=this.queryHighlightByDataId(e);r?r.dataset.couldBeDeleted="false":(o.dataset.id=e,o.dataset.identifier=this.identifierForHighlight(t.identifier),this.updateHighlightPosition(t,o),this.layout.append(o));}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 r,n,i,P,h;let o=this.querySelectorAll("[data-identifier]");if(Object.keys(t.allTrackedBarcodes).length===0){for(let u of o)u.dataset.couldBeDeleted="true";(r=this.pendingDeletionTimeout)!=null&&r.running||(n=this.pendingDeletionTimeout)==null||n.start();return}let e=new Set(t.removedTrackedBarcodes);for(let u of o){let p=(i=u.dataset.identifier)==null?void 0:i.replace("-highlight","").replace("-annotation","");p!=null&&e.has(p)&&(u.dataset.couldBeDeleted="true");}(P=this.pendingDeletionTimeout)!=null&&P.running||(h=this.pendingDeletionTimeout)==null||h.start();}render(t){for(let[o,e]of Object.entries(t.allTrackedBarcodes)){t.addedTrackedBarcodes[o]!=null&&this.onHighlightsOrAnnotationForTrackedBarcode(e);let r=a$8(e),n=this.queryAnnotationByDataId(r),i=this.queryHighlightByDataId(r);i&&(this.updateBrushSize(i,e),this.updateHighlightPosition(e,i)),n&&this.updateAnnotationPosition(e,n,i);}this.updateRemovedTrackedBarcodes(t);}updateHighlightPosition(t,o,e="center"){if(o.hidden)return;let r=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions),n=this.normalizedViewPointFromFrameAnchorPositions(r,e);o.updatePosition(n,new Point(-50,-50),this.calculateRotationAngle(r.topLeft,r.topRight));}updateBrushSize(t,o){if(t.width==null||t.height==null)return;let e=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(o.anchorPositions),r=Math.round(calculateWidth(e)),n=Math.round(calculateHeight(e));t.width!==r&&(t.width=r),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,o,e){var p,y;let n=t.orderVerticesByPosition(),i=this.normalizedViewPointFromFrameAnchorPositions(t,"center"),h={"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)}}[o]();return e?e instanceof b$1?(p={"bottom-center":new Point(i.x,i.y-7-e.clientHeight/2),"top-center":new Point(i.x,i.y+7+e.clientHeight/2),"right-center":new Point(i.x-7-e.clientWidth/2,i.y),"left-center":new Point(i.x+7+e.clientWidth/2,i.y)}[o])!=null?p:h:(y={"bottom-center":new Point(i.x,i.y-7-e.clientHeight/2),"top-center":new Point(i.x,i.y+7+e.clientHeight/2),"right-center":new Point(i.x-7-e.clientWidth/2,i.y),"left-center":new Point(i.x+7+e.clientWidth/2,i.y)}[o])!=null?y:h:h}updateAnnotationPosition(t,o,e){let r=this.dataCaptureView.viewAnchorPositionsForFrameAnchorPositions(t.anchorPositions);o.anchor||(o.anchor="top-center");let n=this.getTransformOrigin(o.anchor),i=this.calculateAnnotationPosition(r,o.anchor,e);o.updatePosition(i,n,this.calculateRotationAngle(r.topLeft,r.topRight));}normalizedViewPointFromFrameAnchorPositions(t,o="center"){let e=this.presenter.currentCamera.getMirrorImageEnabled(),r=new Size(this.dataCaptureView.width,this.dataCaptureView.height);if(e){let i=t[{centerLeft:"centerRight",centerRight:"centerLeft",center:"center",topCenter:"topCenter",bottomCenter:"bottomCenter"}[o]];return Point.mirrorX(i,r)}return t[o]}calculateRotationAngle(t,o){let e=o.x-t.x,r=-(o.y-t.y),n=Math.atan2(r,e);return Math.round(n*(180/Math.PI))}};d.tag="scandit-barcode-ar-view";var k=d;export{k as a};