UNPKG

fabric

Version:

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

3 lines (2 loc) 7.95 kB
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Canvas as e}from"../../canvas/Canvas.min.mjs";import{ITextClickBehavior as i}from"./ITextClickBehavior.min.mjs";import{ctrlKeysMapUp as s,ctrlKeysMapDown as r,keysMapRtl as n,keysMap as o}from"./constants.min.mjs";import{classRegistry as a}from"../../ClassRegistry.min.mjs";import{JUSTIFY as h,JUSTIFY_RIGHT as l,JUSTIFY_LEFT as c,JUSTIFY_CENTER as d}from"../Text/constants.min.mjs";import{RTL as f,RIGHT as u,LEFT as g,CENTER as p,FILL as C}from"../../constants.min.mjs";import{createCanvasElementFor as m}from"../../util/misc/dom.min.mjs";import{applyCanvasTransform as _}from"../../util/internals/applyCanvasTransform.min.mjs";const S={selectionStart:0,selectionEnd:0,selectionColor:"rgba(17,119,255,0.3)",isEditing:!1,editable:!0,editingBorderColor:"rgba(102,153,255,0.25)",cursorWidth:2,cursorColor:"",cursorDelay:1e3,cursorDuration:600,caching:!0,hiddenTextareaContainer:null,keysMap:o,keysMapRtl:n,ctrlKeysMapDown:r,ctrlKeysMapUp:s,_selectionDirection:null,_reSpace:/\s|\r?\n/,inCompositionMode:!1};class x extends i{static getDefaults(){return{...super.getDefaults(),...x.ownDefaults}}get type(){const t=super.type;return"itext"===t?"i-text":t}constructor(t,e){super(t,{...x.ownDefaults,...e}),this.initBehavior()}_set(t,i){return this.isEditing&&this._savedProps&&t in this._savedProps?(this._savedProps[t]=i,this):("canvas"===t&&(this.canvas instanceof e&&this.canvas.textEditingManager.remove(this),i instanceof e&&i.textEditingManager.add(this)),super._set(t,i))}setSelectionStart(t){t=Math.max(t,0),this._updateAndFire("selectionStart",t)}setSelectionEnd(t){t=Math.min(t,this.text.length),this._updateAndFire("selectionEnd",t)}_updateAndFire(t,e){this[t]!==e&&(this._fireSelectionChanged(),this[t]=e),this._updateTextarea()}_fireSelectionChanged(){this.fire("selection:changed"),this.canvas&&this.canvas.fire("text:selection:changed",{target:this})}initDimensions(){this.isEditing&&this.initDelayedCursor(),super.initDimensions()}getSelectionStyles(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.selectionStart||0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.selectionEnd,i=arguments.length>2?arguments[2]:void 0;return super.getSelectionStyles(t,e,i)}setSelectionStyles(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.selectionStart||0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.selectionEnd;return super.setSelectionStyles(t,e,i)}get2DCursorLocation(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.selectionStart,e=arguments.length>1?arguments[1]:void 0;return super.get2DCursorLocation(t,e)}render(t){super.render(t),this.cursorOffsetCache={},this.renderCursorOrSelection()}toCanvasElement(t){const e=this.isEditing;this.isEditing=!1;const i=super.toCanvasElement(t);return this.isEditing=e,i}renderCursorOrSelection(){if(!this.isEditing||!this.canvas)return;const t=this.clearContextTop(!0);if(!t)return;const e=this._getCursorBoundaries(),i=this.findAncestorsWithClipPath(),s=i.length>0;let r,n=t;if(s){r=m(t.canvas),n=r.getContext("2d"),_(n,this.canvas);const e=this.calcTransformMatrix();n.transform(e[0],e[1],e[2],e[3],e[4],e[5])}if(this.selectionStart!==this.selectionEnd||this.inCompositionMode?this.renderSelection(n,e):this.renderCursor(n,e),s)for(const e of i){const i=e.clipPath,s=m(t.canvas),r=s.getContext("2d");if(_(r,this.canvas),!i.absolutePositioned){const t=e.calcTransformMatrix();r.transform(t[0],t[1],t[2],t[3],t[4],t[5])}i.transform(r),i.drawObject(r,!0,{}),this.drawClipPathOnCache(n,i,s)}s&&(t.setTransform(1,0,0,1,0,0),t.drawImage(r,0,0)),this.canvas.contextTopDirty=!0,t.restore()}findAncestorsWithClipPath(){const t=[];let e=this;for(;e;)e.clipPath&&t.push(e),e=e.parent;return t}_getCursorBoundaries(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.selectionStart,e=arguments.length>1?arguments[1]:void 0;const i=this._getLeftOffset(),s=this._getTopOffset(),r=this._getCursorBoundariesOffsets(t,e);return{left:i,top:s,leftOffset:r.left,topOffset:r.top}}_getCursorBoundariesOffsets(t,e){return e?this.__getCursorBoundariesOffsets(t):this.cursorOffsetCache&&"top"in this.cursorOffsetCache?this.cursorOffsetCache:this.cursorOffsetCache=this.__getCursorBoundariesOffsets(t)}__getCursorBoundariesOffsets(t){let e=0,i=0;const{charIndex:s,lineIndex:r}=this.get2DCursorLocation(t),{textAlign:n,direction:o}=this;for(let t=0;t<r;t++)e+=this.getHeightOfLine(t);const a=this._getLineLeftOffset(r),C=this.__charBounds[r][s];C&&(i=C.left),0!==this.charSpacing&&s===this._textLines[r].length&&(i-=this._getWidthOfCharSpacing());let m=a+(i>0?i:0);return o===f&&(n===u||n===h||n===l?m*=-1:n===g||n===c?m=a-(i>0?i:0):n!==p&&n!==d||(m=a-(i>0?i:0))),{top:e,left:m}}renderCursorAt(t){this._renderCursor(this.canvas.contextTop,this._getCursorBoundaries(t,!0),t)}renderCursor(t,e){this._renderCursor(t,e,this.selectionStart)}getCursorRenderingData(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.selectionStart,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this._getCursorBoundaries(t);const i=this.get2DCursorLocation(t),s=i.lineIndex,r=i.charIndex>0?i.charIndex-1:0,n=this.getValueOfPropertyAt(s,r,"fontSize"),o=this.getObjectScaling().x*this.canvas.getZoom(),a=this.cursorWidth/o,h=this.getValueOfPropertyAt(s,r,"deltaY"),l=e.topOffset+(1-this._fontSizeFraction)*this.getHeightOfLine(s)/this.lineHeight-n*(1-this._fontSizeFraction);return{color:this.cursorColor||this.getValueOfPropertyAt(s,r,"fill"),opacity:this._currentCursorOpacity,left:e.left+e.leftOffset-a/2,top:l+e.top+h,width:a,height:n}}_renderCursor(t,e,i){const{color:s,opacity:r,left:n,top:o,width:a,height:h}=this.getCursorRenderingData(i,e);t.fillStyle=s,t.globalAlpha=r,t.fillRect(n,o,a,h)}renderSelection(t,e){const i={selectionStart:this.inCompositionMode?this.hiddenTextarea.selectionStart:this.selectionStart,selectionEnd:this.inCompositionMode?this.hiddenTextarea.selectionEnd:this.selectionEnd};this._renderSelection(t,i,e)}renderDragSourceEffect(){const t=this.draggableTextDelegate.getDragStartSelection();this._renderSelection(this.canvas.contextTop,t,this._getCursorBoundaries(t.selectionStart,!0))}renderDropTargetEffect(t){const e=this.getSelectionStartFromPointer(t);this.renderCursorAt(e)}_renderSelection(t,e,i){const{textAlign:s,direction:r}=this,n=e.selectionStart,o=e.selectionEnd,a=s.includes(h),C=this.get2DCursorLocation(n),m=this.get2DCursorLocation(o),_=C.lineIndex,S=m.lineIndex,x=C.charIndex<0?0:C.charIndex,v=m.charIndex<0?0:m.charIndex;for(let e=_;e<=S;e++){const n=this._getLineLeftOffset(e)||0;let o=this.getHeightOfLine(e),C=0,m=0,O=0;if(e===_&&(m=this.__charBounds[_][x].left),e>=_&&e<S)O=a&&!this.isEndOfWrapping(e)?this.width:this.getLineWidth(e)||5;else if(e===S)if(0===v)O=this.__charBounds[S][v].left;else{const t=this._getWidthOfCharSpacing();O=this.__charBounds[S][v-1].left+this.__charBounds[S][v-1].width-t}C=o,(this.lineHeight<1||e===S&&this.lineHeight>1)&&(o/=this.lineHeight);let y=i.left+n+m,D=o,E=0;const I=O-m;this.inCompositionMode?(t.fillStyle=this.compositionColor||"black",D=1,E=o):t.fillStyle=this.selectionColor,r===f&&(s===u||s===h||s===l?y=this.width-y-I:s===g||s===c?y=i.left+n-O:s!==p&&s!==d||(y=i.left+n-O)),t.fillRect(y,i.top+i.topOffset+E,I,D),i.topOffset+=C}}getCurrentCharFontSize(){const t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fontSize")}getCurrentCharColor(){const t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,C)}_getCurrentCharIndex(){const t=this.get2DCursorLocation(this.selectionStart,!0),e=t.charIndex>0?t.charIndex-1:0;return{l:t.lineIndex,c:e}}dispose(){this.exitEditingImpl(),this.draggableTextDelegate.dispose(),super.dispose()}}t(x,"ownDefaults",S),t(x,"type","IText"),a.setClass(x),a.setClass(x,"i-text");export{x as IText,S as iTextDefaultValues}; //# sourceMappingURL=IText.min.mjs.map