builder-settings-types 0.0.320 → 0.0.323
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
`);const n=()=>{this.hideLoading(),this.previewWrapper.classList.add("has-image"),this.previewEl.style.display="block",this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",o)},o=()=>{this.hideLoading(),this.showError("Failed to load image. Please try again."),this.previewWrapper.classList.remove("has-image"),this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",o)};this.previewEl.addEventListener("load",n),this.previewEl.addEventListener("error",o),this.previewEl.src=t}else this.hideLoading(),this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),i&&(i.innerHTML=`
|
|
189
189
|
<span class="upload-icon">${it}</span>
|
|
190
190
|
<span class="upload-label">Upload</span>
|
|
191
|
-
`)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",a=>{var l;a.relatedTarget&&t.contains(a.relatedTarget)||(l=this.onBlur)==null||l.call(this,this.value??"")},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const a=document.createElement("div");if(a.className="icon-title-container",this.props.icon){const l=this.createIcon(this.props.icon);a.appendChild(l)}if(this.props.title){const l=this.createLabel(this.props.title);a.appendChild(l)}t.appendChild(a)}this.errorContainer=document.createElement("div"),this.errorContainer.className="error-message",this.errorContainer.style.display="none",t.appendChild(this.errorContainer);const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");if(n.className="preview-placeholder",n.innerHTML=ee,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.loadingSpinner=document.createElement("div"),this.loadingSpinner.className="loading-spinner",this.loadingSpinner.innerHTML=se,this.loadingSpinner.style.display="none",this.previewWrapper.appendChild(this.loadingSpinner),this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.props.delete){const a=document.createElement("button");a.className="delete-button",a.type="button",a.title="Delete image",a.innerHTML=ie,this.previewWrapper.appendChild(a),a.onclick=l=>{var r;l.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,""),this.hideError()}}this.previewWrapper.appendChild(this.previewEl);const o=document.createElement("button");return o.className="upload-button",this.getDataPropsPath()&&o.setAttribute("data-test-id",this.getDataPropsPath()),o.innerHTML=`
|
|
191
|
+
`)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",a=>{var l;a.relatedTarget&&t.contains(a.relatedTarget)||(l=this.onBlur)==null||l.call(this,this.value??"")},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const a=document.createElement("div");if(a.className="icon-title-container",this.props.icon){const l=this.createIcon(this.props.icon);a.appendChild(l)}if(this.props.title){const l=this.createLabel(this.props.title);a.appendChild(l)}t.appendChild(a)}this.errorContainer=document.createElement("div"),this.errorContainer.className="error-message",this.errorContainer.style.display="none",t.appendChild(this.errorContainer);const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");if(n.className="preview-placeholder",n.innerHTML=ee,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.loadingSpinner=document.createElement("div"),this.loadingSpinner.className="loading-spinner",this.loadingSpinner.innerHTML=se,this.loadingSpinner.style.display="none",this.previewWrapper.appendChild(this.loadingSpinner),this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.props.delete){const a=document.createElement("button");a.className="delete-button",a.type="button",a.title="Delete image",a.innerHTML=ie,this.previewWrapper.appendChild(a),a.onclick=l=>{var r;l.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,""),this.hideError()}}this.previewWrapper.appendChild(this.previewEl);const o=document.createElement("button");return o.className="upload-button",o.type="button",this.getDataPropsPath()&&o.setAttribute("data-test-id",this.getDataPropsPath()),o.innerHTML=`
|
|
192
192
|
<span class="upload-icon">${it}</span>
|
|
193
193
|
<span class="upload-label">Upload</span>
|
|
194
194
|
`,i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),s?this.updatePreviewState(this.value):this.updatePreviewState(null),o.onclick=()=>{window.postMessage({type:"OPEN_FILE_MANAGER_MODAL",settingId:this.id},"*")},t}}const ne=`
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
<path d="M7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" stroke="#F04438" stroke-width="1.2"/>
|
|
222
222
|
<path d="M8.25 5.75L5.75 8.25M5.75 5.75L8.25 8.25" stroke="#F04438" stroke-width="1.2" stroke-linecap="round"/>
|
|
223
223
|
</svg>
|
|
224
|
-
`,A=class A extends w{constructor(t={}){super(t),this.inputType={imageUrl:"text",markers:"text"},this.mainButton=null,this.thumbnailEl=null,this.markerCountEl=null,this.popoverEl=null,this.backdropEl=null,this.imageElement=null,this.cursorTooltip=null,this.popoverPosition=null,this.isPopoverOpen=!1,this.confirmOverlayEl=null,this.confirmPromise=null,this.lastImageNaturalSize=null,this.draggingMarkerId=null,this.history=[],this.historyIndex=-1,this.isUndoRedoOperation=!1,this.initialValue=null,this.messageListener=null,this.props.maxMarkers=this.props.maxMarkers??10,this.props.maxFileSizeMB=this.props.maxFileSizeMB??5,this.props.markerSize=this.props.markerSize??24,this.value||(this.value={imageUrl:"",markers:[]}),this.setupMessageListener(),this.onBackgroundClick=e=>{this.isPopoverOpen&&this.popoverEl&&!this.popoverEl.contains(e.target)
|
|
224
|
+
`,A=class A extends w{constructor(t={}){super(t),this.inputType={imageUrl:"text",markers:"text"},this.mainButton=null,this.thumbnailEl=null,this.markerCountEl=null,this.popoverEl=null,this.backdropEl=null,this.imageElement=null,this.cursorTooltip=null,this.popoverPosition=null,this.isPopoverOpen=!1,this.confirmOverlayEl=null,this.confirmPromise=null,this.lastImageNaturalSize=null,this.draggingMarkerId=null,this.history=[],this.historyIndex=-1,this.isUndoRedoOperation=!1,this.initialValue=null,this.messageListener=null,this.props.maxMarkers=this.props.maxMarkers??10,this.props.maxFileSizeMB=this.props.maxFileSizeMB??5,this.props.markerSize=this.props.markerSize??24,this.value||(this.value={imageUrl:"",markers:[]}),this.setupMessageListener(),this.onBackgroundClick=e=>{if(this.isPopoverOpen&&this.popoverEl&&!this.popoverEl.contains(e.target)){if(e.target.closest('[class*="modal"], [class*="Modal"], [class*="dialog"], [class*="Dialog"], [class*="overlay"], [class*="Overlay"]'))return;this.closePopover()}},this.handlePopoverKeydown=e=>{this.isPopoverOpen&&(e.key==="Escape"?this.closePopover():(e.ctrlKey||e.metaKey)&&(e.key==="z"||e.key==="Z"?e.shiftKey?(e.preventDefault(),this.redo()):(e.preventDefault(),this.undo()):(e.key==="y"||e.key==="Y")&&(e.preventDefault(),this.redo())))},this.boundHandleMarkerDrag=this.handleMarkerDrag.bind(this),this.boundStopDragging=this.stopDragging.bind(this)}setupMessageListener(){this.messageListener=t=>{if(t.data&&t.data.type==="FILE_MANAGER_IMAGE_SELECTED"&&t.data.settingId===this.id){const e=t.data.imageUrl;if(e&&typeof e=="string"){const i=this.lastImageNaturalSize,s=new Image;s.onload=()=>{var a;const n={width:s.naturalWidth||0,height:s.naturalHeight||0},o=this.scaleMarkersForNewImage(((a=this.value)==null?void 0:a.markers)||[],i,n);this.value={imageUrl:e,markers:o},this.lastImageNaturalSize=n,this.history=[JSON.parse(JSON.stringify(o))],this.historyIndex=0,this.updateUndoRedoButtons(),this.updateButtonDisplay(),this.refreshPopoverContent(),this.triggerChange()},s.onerror=()=>{this.showError("Failed to load image from file manager.")},s.src=e}}},window.addEventListener("message",this.messageListener)}cleanupMessageListener(){this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null)}draw(){const t=document.createElement("div");if(t.className="image-map-setting-wrapper",this.props.title||this.props.icon){const e=document.createElement("div");if(e.className="icon-container",this.props.icon){const i=this.createIcon(this.props.icon);e.appendChild(i)}if(this.props.title){const i=this.createLabel(this.props.title);e.appendChild(i)}t.appendChild(e)}return this.mainButton=document.createElement("button"),this.mainButton.type="button",this.mainButton.className="image-map-button",this.thumbnailEl=document.createElement("img"),this.thumbnailEl.className="image-map-thumbnail",this.mainButton.appendChild(this.thumbnailEl),this.markerCountEl=document.createElement("span"),this.markerCountEl.className="image-map-marker-count",this.mainButton.appendChild(this.markerCountEl),this.mainButton.addEventListener("click",()=>this.openPopover()),t.appendChild(this.mainButton),this.createPopover(),this.updateButtonDisplay(),t}updateButtonDisplay(){if(!this.mainButton||!this.thumbnailEl||!this.markerCountEl)return;if(this.value&&this.value.imageUrl&&this.value.imageUrl!==""){this.mainButton.classList.add("has-image"),this.thumbnailEl.src=this.value.imageUrl;const e=this.value.markers.length;this.markerCountEl.textContent=`${e} marker${e!==1?"s":""}`}else this.mainButton.classList.remove("has-image"),this.thumbnailEl.src="",this.markerCountEl.textContent="Add Image Map"}createPopover(){this.backdropEl=document.createElement("div"),this.backdropEl.className="image-map-backdrop",this.backdropEl.style.display="none",this.popoverEl=document.createElement("div"),this.popoverEl.className="image-map-popover",this.popoverEl.style.display="none";const t=document.createElement("div");t.className="image-map-header",t.style.cursor="move";const e=document.createElement("h3");e.className="image-map-title",e.textContent="Configure Image Map",t.appendChild(e);const i=document.createElement("button");i.type="button",i.className="image-map-close-btn",i.innerHTML=oe,i.addEventListener("click",()=>void this.closePopover()),t.appendChild(i),rt(t,this.popoverEl,(n,o)=>{this.popoverPosition={left:n,top:o}}),this.popoverEl.appendChild(t);const s=document.createElement("div");s.className="image-map-content",this.popoverEl.appendChild(s),document.body.appendChild(this.backdropEl),document.body.appendChild(this.popoverEl)}openPopover(){A.openInstance&&A.openInstance!==this&&A.openInstance.closePopover(),this.isPopoverOpen=!0,A.openInstance=this,this.value?this.initialValue=JSON.parse(JSON.stringify(this.value)):this.initialValue={imageUrl:"",markers:[]},this.value&&(this.history=[JSON.parse(JSON.stringify(this.value.markers))],this.historyIndex=0),this.backdropEl&&(this.backdropEl.style.display="block"),this.popoverEl&&(this.popoverEl.style.display="flex"),this.positionPopover(),this.refreshPopoverContent(),setTimeout(()=>{document.addEventListener("click",this.onBackgroundClick,!0)},200),document.addEventListener("keydown",this.handlePopoverKeydown,!0)}hasAllMarkers(){if(!this.value)return!1;const t=this.props.maxMarkers||10;return this.value.markers.length===t}hasChanges(){return!this.initialValue||!this.value?!1:JSON.stringify(this.initialValue.markers)!==JSON.stringify(this.value.markers)}async closePopover(t=!1){if(!(!this.isPopoverOpen&&!t)){if(!t&&this.hasChanges()&&!this.hasAllMarkers()){if(!await this.showConfirmModal("Discard changes?","You haven't placed all markers. Closing will discard your changes."))return;this.initialValue&&(this.value=JSON.parse(JSON.stringify(this.initialValue)),this.updateButtonDisplay(),this.triggerChange())}this.isPopoverOpen=!1,this.draggingMarkerId=null,this.backdropEl&&(this.backdropEl.style.display="none"),this.popoverEl&&(this.popoverEl.style.display="none"),document.removeEventListener("click",this.onBackgroundClick,!0),document.removeEventListener("keydown",this.handlePopoverKeydown,!0),A.openInstance===this&&(A.openInstance=null)}}positionPopover(){if(!this.popoverEl||!this.mainButton)return;const t=this.mainButton.getBoundingClientRect(),e=800,i=Math.min(window.innerHeight*.8,700);let s=t.right+8,n=t.top;const o=window.innerWidth-t.right;o<e+16&&t.left>o+100&&(s=t.left-e-8),s=Math.max(8,Math.min(s,window.innerWidth-e-8)),n=Math.max(8,Math.min(n,window.innerHeight-i-8)),this.popoverEl.style.left=`${s}px`,this.popoverEl.style.top=`${n}px`,this.popoverPosition={left:s,top:n}}refreshPopoverContent(){if(!this.popoverEl)return;const t=this.popoverEl.querySelector(".image-map-content");if(!t)return;const e=t.querySelector(".image-map-container"),i=(e==null?void 0:e.scrollTop)||0;if(t.innerHTML="",this.value&&this.value.imageUrl&&this.value.imageUrl!==""){const n=document.createElement("div");n.className="image-map-main-layout";const o=document.createElement("div");o.className="image-map-image-section",this.renderImageMapSection(o);const a=document.createElement("div");a.className="image-map-sidebar",this.renderSidebar(a),n.appendChild(o),n.appendChild(a),t.appendChild(n),requestAnimationFrame(()=>{const l=o.querySelector(".image-map-container");l&&(l.scrollTop=i)})}else this.renderUploadSection(t)}renderUploadSection(t){const e=document.createElement("div");e.className="upload-section";const i=document.createElement("button");i.type="button",i.className="upload-label",i.innerHTML=`
|
|
225
225
|
<div class="upload-placeholder">
|
|
226
226
|
${ne}
|
|
227
227
|
<span>Click to upload image</span>
|
|
@@ -3377,7 +3377,7 @@ class lt extends x {
|
|
|
3377
3377
|
}
|
|
3378
3378
|
this.previewWrapper.appendChild(this.previewEl);
|
|
3379
3379
|
const o = document.createElement("button");
|
|
3380
|
-
return o.className = "upload-button", this.getDataPropsPath() && o.setAttribute("data-test-id", this.getDataPropsPath()), o.innerHTML = `
|
|
3380
|
+
return o.className = "upload-button", o.type = "button", this.getDataPropsPath() && o.setAttribute("data-test-id", this.getDataPropsPath()), o.innerHTML = `
|
|
3381
3381
|
<span class="upload-icon">${tt}</span>
|
|
3382
3382
|
<span class="upload-label">Upload</span>
|
|
3383
3383
|
`, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = () => {
|
|
@@ -3427,7 +3427,13 @@ const Kt = `
|
|
|
3427
3427
|
imageUrl: "text",
|
|
3428
3428
|
markers: "text"
|
|
3429
3429
|
}, this.mainButton = null, this.thumbnailEl = null, this.markerCountEl = null, this.popoverEl = null, this.backdropEl = null, this.imageElement = null, this.cursorTooltip = null, this.popoverPosition = null, this.isPopoverOpen = !1, this.confirmOverlayEl = null, this.confirmPromise = null, this.lastImageNaturalSize = null, this.draggingMarkerId = null, this.history = [], this.historyIndex = -1, this.isUndoRedoOperation = !1, this.initialValue = null, this.messageListener = null, this.props.maxMarkers = this.props.maxMarkers ?? 10, this.props.maxFileSizeMB = this.props.maxFileSizeMB ?? 5, this.props.markerSize = this.props.markerSize ?? 24, this.value || (this.value = { imageUrl: "", markers: [] }), this.setupMessageListener(), this.onBackgroundClick = (e) => {
|
|
3430
|
-
this.isPopoverOpen && this.popoverEl && !this.popoverEl.contains(e.target)
|
|
3430
|
+
if (this.isPopoverOpen && this.popoverEl && !this.popoverEl.contains(e.target)) {
|
|
3431
|
+
if (e.target.closest(
|
|
3432
|
+
'[class*="modal"], [class*="Modal"], [class*="dialog"], [class*="Dialog"], [class*="overlay"], [class*="Overlay"]'
|
|
3433
|
+
))
|
|
3434
|
+
return;
|
|
3435
|
+
this.closePopover();
|
|
3436
|
+
}
|
|
3431
3437
|
}, this.handlePopoverKeydown = (e) => {
|
|
3432
3438
|
this.isPopoverOpen && (e.key === "Escape" ? this.closePopover() : (e.ctrlKey || e.metaKey) && (e.key === "z" || e.key === "Z" ? e.shiftKey ? (e.preventDefault(), this.redo()) : (e.preventDefault(), this.undo()) : (e.key === "y" || e.key === "Y") && (e.preventDefault(), this.redo())));
|
|
3433
3439
|
}, this.boundHandleMarkerDrag = this.handleMarkerDrag.bind(this), this.boundStopDragging = this.stopDragging.bind(this);
|
|
@@ -3452,7 +3458,9 @@ const Kt = `
|
|
|
3452
3458
|
imageUrl: e,
|
|
3453
3459
|
markers: o
|
|
3454
3460
|
}, this.lastImageNaturalSize = n, this.history = [
|
|
3455
|
-
JSON.parse(
|
|
3461
|
+
JSON.parse(
|
|
3462
|
+
JSON.stringify(o)
|
|
3463
|
+
)
|
|
3456
3464
|
], this.historyIndex = 0, this.updateUndoRedoButtons(), this.updateButtonDisplay(), this.refreshPopoverContent(), this.triggerChange();
|
|
3457
3465
|
}, s.onerror = () => {
|
|
3458
3466
|
this.showError("Failed to load image from file manager.");
|
package/package.json
CHANGED