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