on-codemerge/dist/src/utils/Resizer.cjs

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product

"use strict";var l=Object.defineProperty;var a=(s,t,e)=>t in s?l(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var i=(s,t,e)=>a(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class d{constructor(t,e={}){i(this,"element");i(this,"handle",null);i(this,"isResizing",!1);i(this,"startX",0);i(this,"startY",0);i(this,"startWidth",0);i(this,"startHeight",0);i(this,"options");this.element=t,this.options={handleSize:10,handleColor:"blue",minWidth:50,minHeight:50,...e},this.createResizeHandle()}createResizeHandle(){const t=this.element.querySelector(".resize-handle");t&&t.remove(),this.handle=document.createElement("div"),this.handle.className="resize-handle",this.handle.style.position="absolute",this.handle.style.right="0",this.handle.style.bottom="0",this.handle.style.width=`${this.options.handleSize}px`,this.handle.style.height=`${this.options.handleSize}px`,this.handle.style.backgroundColor=this.options.handleColor??"blue",this.handle.style.cursor="se-resize",this.element.style.position="relative",this.element.appendChild(this.handle),this.handle.addEventListener("mousedown",e=>this.startResize(e)),document.addEventListener("mousemove",e=>this.resize(e)),document.addEventListener("mouseup",()=>this.stopResize())}startResize(t){var e,o;this.isResizing=!0,this.startX=t.clientX,this.startY=t.clientY,this.startWidth=this.element.offsetWidth,this.startHeight=this.element.offsetHeight,(o=(e=this.options).onResizeStart)==null||o.call(e),t.preventDefault()}resize(t){var e,o;if(this.isResizing&&this.handle){let h=this.startWidth+(t.clientX-this.startX),n=this.startHeight+(t.clientY-this.startY);this.options.minWidth!==void 0&&h<this.options.minWidth&&(h=this.options.minWidth),this.options.maxWidth!==void 0&&h>this.options.maxWidth&&(h=this.options.maxWidth),this.options.minHeight!==void 0&&n<this.options.minHeight&&(n=this.options.minHeight),this.options.maxHeight!==void 0&&n>this.options.maxHeight&&(n=this.options.maxHeight),this.element.style.width=`${h}px`,this.element.style.height=`${n}px`,(o=(e=this.options).onResize)==null||o.call(e,h,n,t)}}stopResize(){var t,e;this.isResizing=!1,(e=(t=this.options).onResizeEnd)==null||e.call(t)}destroy(){this.handle&&this.handle.remove(),document.removeEventListener("mousemove",t=>this.resize(t)),document.removeEventListener("mouseup",()=>this.stopResize())}}exports.Resizer=d;