UNPKG

fabric

Version:

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

3 lines (2 loc) 8.15 kB
import{objectSpread2 as t,defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Canvas as i}from"../../canvas/Canvas.min.mjs";import{ITextClickBehavior as s}from"./ITextClickBehavior.min.mjs";import{keysMap as r,keysMapRtl as n,ctrlKeysMapDown as o,ctrlKeysMapUp as h}from"./constants.min.mjs";import{classRegistry as a}from"../../ClassRegistry.min.mjs";import{JUSTIFY as l,JUSTIFY_RIGHT as c,JUSTIFY_LEFT as d,JUSTIFY_CENTER as f}from"../Text/constants.min.mjs";import{RIGHT as g,LEFT as u,CENTER as p,FILL as C}from"../../constants.min.mjs";import{createCanvasElementFor as m}from"../../util/misc/dom.min.mjs";import{applyCanvasTransform as x}from"../../util/internals/applyCanvasTransform.min.mjs";const _=t({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:r,keysMapRtl:n,ctrlKeysMapDown:o,ctrlKeysMapUp:h},{_selectionDirection:null,_reSpace:/\s|\r?\n/,inCompositionMode:!1});class S extends s{static getDefaults(){return t(t({},super.getDefaults()),S.ownDefaults)}get type(){const t=super.type;return"itext"===t?"i-text":t}constructor(e,i){super(e,t(t({},S.ownDefaults),i)),this.initBehavior()}_set(t,e){return this.isEditing&&this._savedProps&&t in this._savedProps?(this._savedProps[t]=e,this):("canvas"===t&&(this.canvas instanceof i&&this.canvas.textEditingManager.remove(this),e instanceof i&&e.textEditingManager.add(this)),super._set(t,e))}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"),x(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(x(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);for(let t=0;t<r;t++)e+=this.getHeightOfLine(t);const n=this._getLineLeftOffset(r),o=this.__charBounds[r][s];o&&(i=o.left),0!==this.charSpacing&&s===this._textLines[r].length&&(i-=this._getWidthOfCharSpacing());const h={top:e,left:n+(i>0?i:0)};return"rtl"===this.direction&&(this.textAlign===g||this.textAlign===l||this.textAlign===c?h.left*=-1:this.textAlign===u||this.textAlign===d?h.left=n-(i>0?i:0):this.textAlign!==p&&this.textAlign!==f||(h.left=n-(i>0?i:0))),h}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(),h=this.cursorWidth/o,a=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-h/2,top:l+e.top+a,width:h,height:n}}_renderCursor(t,e,i){const{color:s,opacity:r,left:n,top:o,width:h,height:a}=this.getCursorRenderingData(i,e);t.fillStyle=s,t.globalAlpha=r,t.fillRect(n,o,h,a)}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 s=e.selectionStart,r=e.selectionEnd,n=this.textAlign.includes(l),o=this.get2DCursorLocation(s),h=this.get2DCursorLocation(r),a=o.lineIndex,C=h.lineIndex,m=o.charIndex<0?0:o.charIndex,x=h.charIndex<0?0:h.charIndex;for(let e=a;e<=C;e++){const s=this._getLineLeftOffset(e)||0;let r=this.getHeightOfLine(e),o=0,h=0,_=0;if(e===a&&(h=this.__charBounds[a][m].left),e>=a&&e<C)_=n&&!this.isEndOfWrapping(e)?this.width:this.getLineWidth(e)||5;else if(e===C)if(0===x)_=this.__charBounds[C][x].left;else{const t=this._getWidthOfCharSpacing();_=this.__charBounds[C][x-1].left+this.__charBounds[C][x-1].width-t}o=r,(this.lineHeight<1||e===C&&this.lineHeight>1)&&(r/=this.lineHeight);let S=i.left+s+h,v=r,O=0;const y=_-h;this.inCompositionMode?(t.fillStyle=this.compositionColor||"black",v=1,O=r):t.fillStyle=this.selectionColor,"rtl"===this.direction&&(this.textAlign===g||this.textAlign===l||this.textAlign===c?S=this.width-S-y:this.textAlign===u||this.textAlign===d?S=i.left+s-_:this.textAlign!==p&&this.textAlign!==f||(S=i.left+s-_)),t.fillRect(S,i.top+i.topOffset+O,y,v),i.topOffset+=o}}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()}}e(S,"ownDefaults",_),e(S,"type","IText"),a.setClass(S),a.setClass(S,"i-text");export{S as IText,_ as iTextDefaultValues}; //# sourceMappingURL=IText.min.mjs.map