UNPKG

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

3 lines (2 loc) 3.08 kB
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */ "use strict";var d=Object.defineProperty;var l=(o,e,t)=>e in o?d(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var i=(o,e,t)=>l(o,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class u{constructor(e,t={}){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");i(this,"boundMouseMove");i(this,"boundMouseUp");this.element=e,this.options={handleSize:10,handleColor:"blue",minWidth:50,minHeight:50,...t},this.createResizeHandle()}createResizeHandle(){const e=this.element.querySelector(".resize-handle");e&&e.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",t=>this.startResize(t))}startResize(e){var t,h;this.isResizing=!0,this.startX=e.clientX,this.startY=e.clientY,this.startWidth=this.element.offsetWidth,this.startHeight=this.element.offsetHeight,(h=(t=this.options).onResizeStart)==null||h.call(t),e.preventDefault(),this.boundMouseMove=s=>this.resize(s),this.boundMouseUp=()=>this.stopResize(),document.addEventListener("mousemove",this.boundMouseMove),document.addEventListener("mouseup",this.boundMouseUp)}resize(e){var t,h;if(this.isResizing&&this.handle){let s=this.startWidth+(e.clientX-this.startX),n=this.startHeight+(e.clientY-this.startY);this.options.minWidth!==void 0&&s<this.options.minWidth&&(s=this.options.minWidth),this.options.maxWidth!==void 0&&s>this.options.maxWidth&&(s=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=`${s}px`,this.element.style.height=`${n}px`,(h=(t=this.options).onResize)==null||h.call(t,s,n,e)}}stopResize(){var e,t;this.isResizing=!1,(t=(e=this.options).onResizeEnd)==null||t.call(e),this.boundMouseMove&&(document.removeEventListener("mousemove",this.boundMouseMove),this.boundMouseMove=void 0),this.boundMouseUp&&(document.removeEventListener("mouseup",this.boundMouseUp),this.boundMouseUp=void 0)}destroy(){this.handle&&this.handle.remove(),this.boundMouseMove&&(document.removeEventListener("mousemove",this.boundMouseMove),this.boundMouseMove=void 0),this.boundMouseUp&&(document.removeEventListener("mouseup",this.boundMouseUp),this.boundMouseUp=void 0)}}exports.Resizer=u;