builder-settings-types 0.0.320 → 0.0.322

package/dist/builder-settings-types.cjs.js

@@ -221,7 +221,7 @@
   <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"/>
   <path d="M8.25 5.75L5.75 8.25M5.75 5.75L8.25 8.25" stroke="#F04438" stroke-width="1.2" stroke-linecap="round"/>
 </svg>
-`,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)&&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=`
+`,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=`
       <div class="upload-placeholder">
         ${ne}
         <span>Click to upload image</span>

package/dist/builder-settings-types.es.js

@@ -3427,7 +3427,13 @@ const Kt = `
       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) && this.closePopover();
+      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);
@@ -3452,7 +3458,9 @@ const Kt = `
               imageUrl: e,
               markers: o
             }, this.lastImageNaturalSize = n, this.history = [
-              JSON.parse(JSON.stringify(o))
+              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.");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.320",
+  "version": "0.0.322",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",