fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
2 lines • 5.91 kB
JavaScript
import{_defineProperty as e}from"../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/defineProperty.min.mjs";import{CHANGED as t,NONE as n}from"../../constants.min.mjs";import{Point as r}from"../../Point.min.mjs";import{getDocumentFromElement as i}from"../../util/dom_misc.min.mjs";import{cloneStyles as a}from"../../util/internals/cloneStyles.min.mjs";import{setStyle as o}from"../../util/internals/dom_style.min.mjs";var s=class{constructor(t){e(this,`target`,void 0),e(this,`__mouseDownInPlace`,!1),e(this,`__dragStartFired`,!1),e(this,`__isDraggingOver`,!1),e(this,`__dragStartSelection`,void 0),e(this,`__dragImageDisposer`,void 0),e(this,`_dispose`,void 0),this.target=t;let n=[this.target.on(`dragenter`,this.dragEnterHandler.bind(this)),this.target.on(`dragover`,this.dragOverHandler.bind(this)),this.target.on(`dragleave`,this.dragLeaveHandler.bind(this)),this.target.on(`dragend`,this.dragEndHandler.bind(this)),this.target.on(`drop`,this.dropHandler.bind(this))];this._dispose=()=>{n.forEach(e=>e()),this._dispose=void 0}}isPointerOverSelection(e){let t=this.target,n=t.getSelectionStartFromPointer(e);return t.isEditing&&n>=t.selectionStart&&n<=t.selectionEnd&&t.selectionStart<t.selectionEnd}start(e){return this.__mouseDownInPlace=this.isPointerOverSelection(e)}isActive(){return this.__mouseDownInPlace}end(e){let t=this.isActive();return t&&!this.__dragStartFired&&(this.target.setCursorByClick(e),this.target.initDelayedCursor(!0)),this.__mouseDownInPlace=!1,this.__dragStartFired=!1,this.__isDraggingOver=!1,t}getDragStartSelection(){return this.__dragStartSelection}setDragImage(e,{selectionStart:t,selectionEnd:s}){var c;let l=this.target,u=l.canvas,d=new r(l.flipX?-1:1,l.flipY?-1:1),f=l._getCursorBoundaries(t),p=new r(f.left+f.leftOffset,f.top+f.topOffset).multiply(d).transform(l.calcTransformMatrix()),m=u.getScenePoint(e).subtract(p),h=l.getCanvasRetinaScaling(),g=l.getBoundingRect(),_=p.subtract(new r(g.left,g.top)),v=u.viewportTransform,y=_.add(m).transform(v,!0),b=l.backgroundColor,x=a(l.styles);l.backgroundColor=``;let S={stroke:`transparent`,fill:`transparent`,textBackgroundColor:`transparent`};l.setSelectionStyles(S,0,t),l.setSelectionStyles(S,s,l.text.length),l.dirty=!0;let C=l.toCanvasElement({enableRetinaScaling:u.enableRetinaScaling,viewportTransform:!0});l.backgroundColor=b,l.styles=x,l.dirty=!0,o(C,{position:`fixed`,left:-C.width+`px`,border:n,width:C.width/h+`px`,height:C.height/h+`px`}),this.__dragImageDisposer&&this.__dragImageDisposer(),this.__dragImageDisposer=()=>{C.remove()},i(e.target||this.target.hiddenTextarea).body.appendChild(C),(c=e.dataTransfer)==null||c.setDragImage(C,y.x,y.y)}onDragStart(e){this.__dragStartFired=!0;let t=this.target,n=this.isActive();if(n&&e.dataTransfer){let n=this.__dragStartSelection={selectionStart:t.selectionStart,selectionEnd:t.selectionEnd},r=t._text.slice(n.selectionStart,n.selectionEnd).join(``),i={text:t.text,value:r,...n};e.dataTransfer.setData(`text/plain`,r),e.dataTransfer.setData(`application/fabric`,JSON.stringify({value:r,styles:t.getSelectionStyles(n.selectionStart,n.selectionEnd,!0)})),e.dataTransfer.effectAllowed=`copyMove`,this.setDragImage(e,i)}return t.abortCursorAnimation(),n}canDrop(e){if(this.target.editable&&!this.target.getActiveControl()&&!e.defaultPrevented){if(this.isActive()&&this.__dragStartSelection){let t=this.target.getSelectionStartFromPointer(e),n=this.__dragStartSelection;return t<n.selectionStart||t>n.selectionEnd}return!0}return!1}targetCanDrop(e){return this.target.canDrop(e)}dragEnterHandler({e}){let t=this.targetCanDrop(e);!this.__isDraggingOver&&t&&(this.__isDraggingOver=!0)}dragOverHandler(e){let{e:t}=e,n=this.targetCanDrop(t);!this.__isDraggingOver&&n?this.__isDraggingOver=!0:this.__isDraggingOver&&!n&&(this.__isDraggingOver=!1),this.__isDraggingOver&&(t.preventDefault(),e.canDrop=!0,e.dropTarget=this.target)}dragLeaveHandler(){(this.__isDraggingOver||this.isActive())&&(this.__isDraggingOver=!1)}dropHandler(e){var n;let{e:r}=e,i=r.defaultPrevented;this.__isDraggingOver=!1,r.preventDefault();let a=(n=r.dataTransfer)==null?void 0:n.getData(`text/plain`);if(a&&!i){let n=this.target,i=n.canvas,o=n.getSelectionStartFromPointer(r),{styles:s}=r.dataTransfer.types.includes(`application/fabric`)?JSON.parse(r.dataTransfer.getData(`application/fabric`)):{},c=a[Math.max(0,a.length-1)];if(this.__dragStartSelection){let e=this.__dragStartSelection.selectionStart,t=this.__dragStartSelection.selectionEnd;o>e&&o<=t?o=e:o>t&&(o-=t-e),n.removeChars(e,t),delete this.__dragStartSelection}n._reNewline.test(c)&&(n._reNewline.test(n._text[o])||o===n._text.length)&&(a=a.trimEnd()),e.didDrop=!0,e.dropTarget=n,n.insertChars(a,s,o),i.setActiveObject(n),n.enterEditing(r),n.selectionStart=Math.min(o+0,n._text.length),n.selectionEnd=Math.min(n.selectionStart+a.length,n._text.length),n.hiddenTextarea.value=n.text,n._updateTextarea(),n.hiddenTextarea.focus(),n.fire(t,{index:o+0,action:`drop`}),i.fire(`text:changed`,{target:n}),i.contextTopDirty=!0,i.requestRenderAll()}}dragEndHandler({e}){if(this.isActive()&&this.__dragStartFired&&this.__dragStartSelection){var n;let r=this.target,i=this.target.canvas,{selectionStart:a,selectionEnd:o}=this.__dragStartSelection,s=((n=e.dataTransfer)==null?void 0:n.dropEffect)||`none`;s===`none`?(r.selectionStart=a,r.selectionEnd=o,r._updateTextarea(),r.hiddenTextarea.focus()):(r.clearContextTop(),s===`move`&&(r.removeChars(a,o),r.selectionStart=r.selectionEnd=a,r.hiddenTextarea&&(r.hiddenTextarea.value=r.text),r._updateTextarea(),r.fire(t,{index:a,action:`dragend`}),i.fire(`text:changed`,{target:r}),i.requestRenderAll()),r.exitEditing())}this.__dragImageDisposer&&this.__dragImageDisposer(),delete this.__dragImageDisposer,delete this.__dragStartSelection,this.__isDraggingOver=!1}dispose(){this._dispose&&this._dispose()}};export{s as DraggableTextDelegate};
//# sourceMappingURL=DraggableTextDelegate.min.mjs.map