on-codemerge
Version:
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
2 lines (1 loc) • 3.24 kB
JavaScript
"use strict";var h=Object.defineProperty;var r=(o,t,s)=>t in o?h(o,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[t]=s;var a=(o,t,s)=>r(o,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class l{constructor(t=!0){a(this,"element",null);a(this,"handles",[]);a(this,"isResizing",!1);a(this,"startX",0);a(this,"startY",0);a(this,"startWidth",0);a(this,"startHeight",0);a(this,"aspectRatio",1);a(this,"preserveAspectRatio");a(this,"currentPosition",null);a(this,"handleResize",t=>{if(!this.isResizing||!this.element||!this.currentPosition)return;const s=t.clientX-this.startX,e=t.clientY-this.startY;let i=this.startWidth,n=this.startHeight;switch(this.currentPosition){case"nw":i=this.startWidth-s,n=this.startHeight-e,this.preserveAspectRatio&&(n=i/this.aspectRatio);break;case"ne":i=this.startWidth+s,n=this.startHeight-e,this.preserveAspectRatio&&(n=i/this.aspectRatio);break;case"se":i=this.startWidth+s,n=this.startHeight+e,this.preserveAspectRatio&&(n=i/this.aspectRatio);break;case"sw":i=this.startWidth-s,n=this.startHeight+e,this.preserveAspectRatio&&(n=i/this.aspectRatio);break}i=Math.max(50,i),n=Math.max(50,n),this.element.style.width=`${i}px`,this.element.style.height=`${n}px`,this.updateHandlePositions()});a(this,"stopResize",()=>{this.isResizing=!1,this.currentPosition=null,document.removeEventListener("mousemove",this.handleResize),document.removeEventListener("mouseup",this.stopResize)});this.preserveAspectRatio=t}attachTo(t){this.detach(),this.element=t,this.aspectRatio=t.offsetWidth/t.offsetHeight,this.createHandles()}detach(){this.handles.forEach(t=>t.remove()),this.handles=[],this.element=null}createHandles(){["nw","ne","se","sw"].forEach(s=>{var i;const e=document.createElement("div");e.className=`resize-handle resize-handle-${s}`,e.addEventListener("mousedown",n=>this.startResize(n,s)),this.element&&((i=this.element.parentElement)==null||i.appendChild(e),this.positionHandle(e,s)),this.handles.push(e)})}positionHandle(t,s){if(!this.element)return;const e=this.element.getBoundingClientRect(),i=8;switch(s){case"nw":t.style.left=`${e.left-i/2}px`,t.style.top=`${e.top-i/2}px`;break;case"ne":t.style.left=`${e.right-i/2}px`,t.style.top=`${e.top-i/2}px`;break;case"se":t.style.left=`${e.right-i/2}px`,t.style.top=`${e.bottom-i/2}px`;break;case"sw":t.style.left=`${e.left-i/2}px`,t.style.top=`${e.bottom-i/2}px`;break}}updateHandlePositions(){if(!this.element)return;const t=this.element.getBoundingClientRect(),s=8;this.handles.forEach((e,i)=>{switch(["nw","ne","se","sw"][i]){case"nw":e.style.left=`${t.left-s/2}px`,e.style.top=`${t.top-s/2}px`;break;case"ne":e.style.left=`${t.right-s/2}px`,e.style.top=`${t.top-s/2}px`;break;case"se":e.style.left=`${t.right-s/2}px`,e.style.top=`${t.bottom-s/2}px`;break;case"sw":e.style.left=`${t.left-s/2}px`,e.style.top=`${t.bottom-s/2}px`;break}})}startResize(t,s){this.element&&(t.preventDefault(),this.isResizing=!0,this.currentPosition=s,this.startX=t.clientX,this.startY=t.clientY,this.startWidth=this.element.offsetWidth,this.startHeight=this.element.offsetHeight,document.addEventListener("mousemove",this.handleResize),document.addEventListener("mouseup",this.stopResize))}}exports.ResizableElement=l;