UNPKG

fabric

Version:

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

3 lines (2 loc) 7.72 kB
import{config as t}from"../../config.min.mjs";import{getFabricDocument as e,getEnv as i}from"../../env/index.min.mjs";import{capValue as s}from"../../util/misc/capValue.min.mjs";import{ITextBehavior as o}from"./ITextBehavior.min.mjs";import{getDocumentFromElement as n}from"../../util/dom_misc.min.mjs";import{RIGHT as r,LEFT as h,CHANGED as c}from"../../constants.min.mjs";class a extends o{initHiddenTextarea(){const t=this.canvas&&n(this.canvas.getElement())||e(),i=t.createElement("textarea");Object.entries({autocapitalize:"off",autocorrect:"off",autocomplete:"off",spellcheck:"false","data-fabric":"textarea",wrap:"off"}).map((t=>{let[e,s]=t;return i.setAttribute(e,s)}));const{top:s,left:o,fontSize:r}=this._calcTextareaPosition();i.style.cssText="position: absolute; top: ".concat(s,"; left: ").concat(o,"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; padding-top: ").concat(r,";"),(this.hiddenTextareaContainer||t.body).appendChild(i),Object.entries({blur:"blur",keydown:"onKeyDown",keyup:"onKeyUp",input:"onInput",copy:"copy",cut:"copy",paste:"paste",compositionstart:"onCompositionStart",compositionupdate:"onCompositionUpdate",compositionend:"onCompositionEnd"}).map((t=>{let[e,s]=t;return i.addEventListener(e,this[s].bind(this))})),this.hiddenTextarea=i}blur(){this.abortCursorAnimation()}onKeyDown(t){if(!this.isEditing)return;const e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown)||!t.ctrlKey&&!t.metaKey)return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),t.keyCode>=33&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}onKeyUp(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())}onInput(e){const s=this.fromPaste,{value:o,selectionStart:n,selectionEnd:r}=this.hiddenTextarea;if(this.fromPaste=!1,e&&e.stopPropagation(),!this.isEditing)return;const h=()=>{this.updateFromTextArea(),this.fire(c),this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll())};if(""===this.hiddenTextarea.value)return this.styles={},void h();const a=this._splitTextIntoLines(o).graphemeText,l=this._text.length,d=a.length,m=this.selectionStart,f=this.selectionEnd,p=m!==f;let u,g,S,_,y=d-l;const C=this.fromStringToGraphemeSelection(n,r,o),x=m>C.selectionStart;p?(g=this._text.slice(m,f),y+=f-m):d<l&&(g=x?this._text.slice(f+y,f):this._text.slice(m,m-y));const v=a.slice(C.selectionEnd-y,C.selectionEnd);if(g&&g.length&&(v.length&&(u=this.getSelectionStyles(m,m+1,!1),u=v.map((()=>u[0]))),p?(S=m,_=f):x?(S=f-g.length,_=f):(S=f,_=f+g.length),this.removeStyleFromTo(S,_)),v.length){const{copyPasteData:e}=i();s&&v.join("")===e.copiedText&&!t.disableStyleCopyPaste&&(u=e.copiedTextStyle),this.insertNewStyleBlock(v,m,u)}h()}onCompositionStart(){this.inCompositionMode=!0}onCompositionEnd(){this.inCompositionMode=!1}onCompositionUpdate(t){let{target:e}=t;const{selectionStart:i,selectionEnd:s}=e;this.compositionStart=i,this.compositionEnd=s,this.updateTextareaPosition()}copy(){if(this.selectionStart===this.selectionEnd)return;const{copyPasteData:e}=i();e.copiedText=this.getSelectedText(),t.disableStyleCopyPaste?e.copiedTextStyle=void 0:e.copiedTextStyle=this.getSelectionStyles(this.selectionStart,this.selectionEnd,!0),this._copyDone=!0}paste(){this.fromPaste=!0}_getWidthBeforeCursor(t,e){let i,s=this._getLineLeftOffset(t);return e>0&&(i=this.__charBounds[t][e-1],s+=i.left+i.width),s}getDownCursorOffset(t,e){const i=this._getSelectionForOffset(t,e),s=this.get2DCursorLocation(i),o=s.lineIndex;if(o===this._textLines.length-1||t.metaKey||34===t.keyCode)return this._text.length-i;const n=s.charIndex,r=this._getWidthBeforeCursor(o,n),h=this._getIndexOnLine(o+1,r);return this._textLines[o].slice(n).length+h+1+this.missingNewlineOffset(o)}_getSelectionForOffset(t,e){return t.shiftKey&&this.selectionStart!==this.selectionEnd&&e?this.selectionEnd:this.selectionStart}getUpCursorOffset(t,e){const i=this._getSelectionForOffset(t,e),s=this.get2DCursorLocation(i),o=s.lineIndex;if(0===o||t.metaKey||33===t.keyCode)return-i;const n=s.charIndex,r=this._getWidthBeforeCursor(o,n),h=this._getIndexOnLine(o-1,r),c=this._textLines[o].slice(0,n),a=this.missingNewlineOffset(o-1);return-this._textLines[o-1].length+h-c.length+(1-a)}_getIndexOnLine(t,e){const i=this._textLines[t];let s,o,n=this._getLineLeftOffset(t),r=0;for(let h=0,c=i.length;h<c;h++)if(s=this.__charBounds[t][h].width,n+=s,n>e){o=!0;const t=n-s,i=n,c=Math.abs(t-e);r=Math.abs(i-e)<c?h:h-1;break}return o||(r=i.length-1),r}moveCursorDown(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)}moveCursorUp(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)}_moveCursorUpOrDown(t,e){const i=this["get".concat(t,"CursorOffset")](e,this._selectionDirection===r);if(e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i){const t=this.text.length;this.selectionStart=s(0,this.selectionStart,t),this.selectionEnd=s(0,this.selectionEnd,t),this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea()}}moveCursorWithShift(t){const e=this._selectionDirection===h?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t}moveCursorWithoutShift(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t}moveCursorLeft(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)}_move(t,e,i){let s;if(t.altKey)s=this["findWordBoundary".concat(i)](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;s=this["findLineBoundary".concat(i)](this[e])}return void 0!==s&&this[e]!==s&&(this[e]=s,!0)}_moveLeft(t,e){return this._move(t,e,"Left")}_moveRight(t,e){return this._move(t,e,"Right")}moveCursorLeftWithoutShift(t){let e=!0;return this._selectionDirection=h,this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e}moveCursorLeftWithShift(t){return this._selectionDirection===r&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection=h,this._moveLeft(t,"selectionStart")):void 0}moveCursorRight(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)}_moveCursorLeftOrRight(t,e){const i="moveCursor".concat(t).concat(e.shiftKey?"WithShift":"WithoutShift");this._currentCursorOpacity=1,this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())}moveCursorRightWithShift(t){return this._selectionDirection===h&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection=r,this._moveRight(t,"selectionEnd")):void 0}moveCursorRightWithoutShift(t){let e=!0;return this._selectionDirection=r,this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e}}export{a as ITextKeyBehavior}; //# sourceMappingURL=ITextKeyBehavior.min.mjs.map