fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
3 lines (2 loc) • 17.3 kB
JavaScript
import{defineProperty as e}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{classRegistry as t}from"../ClassRegistry.min.mjs";import{NONE as r}from"../constants.min.mjs";import{Point as s}from"../Point.min.mjs";import{stopEvent as i,isTouchEvent as n}from"../util/dom_event.min.mjs";import{getWindowFromElement as o,getDocumentFromElement as a}from"../util/dom_misc.min.mjs";import{sendPointToPlane as h}from"../util/misc/planeChange.min.mjs";import{isActiveSelection as c}from"../util/typeAssertions.min.mjs";import{SelectableCanvas as u}from"./SelectableCanvas.min.mjs";import{TextEditingManager as g}from"./TextEditingManager.min.mjs";const d={passive:!1},l=(e,t)=>({viewportPoint:e.getViewportPoint(t),scenePoint:e.getScenePoint(t)}),_=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),s=1;s<t;s++)r[s-1]=arguments[s];return e.addEventListener(...r)},v=function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),s=1;s<t;s++)r[s-1]=arguments[s];return e.removeEventListener(...r)},f={mouse:{in:"over",out:"out",targetIn:"mouseover",targetOut:"mouseout",canvasIn:"mouse:over",canvasOut:"mouse:out"},drag:{in:"enter",out:"leave",targetIn:"dragenter",targetOut:"dragleave",canvasIn:"drag:enter",canvasOut:"drag:leave"}};class m extends u{constructor(t){super(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),e(this,"_isClick",void 0),e(this,"textEditingManager",new g(this)),["_onMouseDown","_onTouchStart","_onMouseMove","_onMouseUp","_onTouchEnd","_onResize","_onMouseWheel","_onMouseOut","_onMouseEnter","_onContextMenu","_onClick","_onDragStart","_onDragEnd","_onDragProgress","_onDragOver","_onDragEnter","_onDragLeave","_onDrop"].forEach(e=>{this[e]=this[e].bind(this)}),this.addOrRemove(_)}_getEventPrefix(){return this.enablePointerEvents?"pointer":"mouse"}addOrRemove(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const r=this.upperCanvasEl,s=this._getEventPrefix();e(o(r),"resize",this._onResize),e(r,s+"down",this._onMouseDown),e(r,`${s}move`,this._onMouseMove,d),e(r,`${s}out`,this._onMouseOut),e(r,`${s}enter`,this._onMouseEnter),e(r,"wheel",this._onMouseWheel,{passive:!1}),e(r,"contextmenu",this._onContextMenu),t||(e(r,"click",this._onClick),e(r,"dblclick",this._onClick)),e(r,"dragstart",this._onDragStart),e(r,"dragend",this._onDragEnd),e(r,"dragover",this._onDragOver),e(r,"dragenter",this._onDragEnter),e(r,"dragleave",this._onDragLeave),e(r,"drop",this._onDrop),this.enablePointerEvents||e(r,"touchstart",this._onTouchStart,d)}removeListeners(){this.addOrRemove(v);const e=this._getEventPrefix(),t=a(this.upperCanvasEl);v(t,`${e}up`,this._onMouseUp),v(t,"touchend",this._onTouchEnd,d),v(t,`${e}move`,this._onMouseMove,d),v(t,"touchmove",this._onMouseMove,d),clearTimeout(this._willAddMouseDown)}_onMouseWheel(e){this._cacheTransformEventData(e),this._handleEvent(e,"wheel"),this._resetTransformEventData()}_onMouseOut(e){const t=this._hoveredTarget,r={e:e,...l(this,e)};this.fire("mouse:out",{...r,target:t}),this._hoveredTarget=void 0,t&&t.fire("mouseout",{...r}),this._hoveredTargets.forEach(e=>{this.fire("mouse:out",{...r,target:e}),e&&e.fire("mouseout",{...r})}),this._hoveredTargets=[]}_onMouseEnter(e){const{target:t}=this.findTarget(e);this._currentTransform||t||(this.fire("mouse:over",{e:e,...l(this,e)}),this._hoveredTarget=void 0,this._hoveredTargets=[])}_onDragStart(e){this._isClick=!1;const t=this.getActiveObject();if(t&&t.onDragStart(e)){this._dragSource=t;const r={e:e,target:t};return this.fire("dragstart",r),t.fire("dragstart",r),void _(this.upperCanvasEl,"drag",this._onDragProgress)}i(e)}_renderDragEffects(e,t,r){let s=!1;const i=this._dropTarget;i&&i!==t&&i!==r&&(i.clearContextTop(),s=!0),null==t||t.clearContextTop(),r!==t&&(null==r||r.clearContextTop());const n=this.contextTop;n.save(),n.transform(...this.viewportTransform),t&&(n.save(),t.transform(n),t.renderDragSourceEffect(e),n.restore(),s=!0),r&&(n.save(),r.transform(n),r.renderDropTargetEffect(e),n.restore(),s=!0),n.restore(),s&&(this.contextTopDirty=!0)}_onDragEnd(e){const{currentSubTargets:t}=this.findTarget(e),s=!!e.dataTransfer&&e.dataTransfer.dropEffect!==r,i=s?this._activeObject:void 0,n={e:e,target:this._dragSource,subTargets:t,dragSource:this._dragSource,didDrop:s,dropTarget:i};v(this.upperCanvasEl,"drag",this._onDragProgress),this.fire("dragend",n),this._dragSource&&this._dragSource.fire("dragend",n),delete this._dragSource,this._onMouseUp(e)}_onDragProgress(e){const t={e:e,target:this._dragSource,dragSource:this._dragSource,dropTarget:this._draggedoverTarget};this.fire("drag",t),this._dragSource&&this._dragSource.fire("drag",t)}_onDragOver(e){const t="dragover",{currentContainer:r,currentSubTargets:s}=this.findTarget(e),i=this._dragSource,n={e:e,target:r,subTargets:s,dragSource:i,canDrop:!1,dropTarget:void 0};let o;this.fire(t,n),this._fireEnterLeaveEvents(e,r,n),r&&(r.canDrop(e)&&(o=r),r.fire(t,n));for(let r=0;r<s.length;r++){const i=s[r];i.canDrop(e)&&(o=i),i.fire(t,n)}this._renderDragEffects(e,i,o),this._dropTarget=o}_onDragEnter(e){const{currentContainer:t,currentSubTargets:r}=this.findTarget(e),s={e:e,target:t,subTargets:r,dragSource:this._dragSource};this.fire("dragenter",s),this._fireEnterLeaveEvents(e,t,s)}_onDragLeave(e){const{currentSubTargets:t}=this.findTarget(e),r={e:e,target:this._draggedoverTarget,subTargets:t,dragSource:this._dragSource};this.fire("dragleave",r),this._fireEnterLeaveEvents(e,void 0,r),this._renderDragEffects(e,this._dragSource),this._dropTarget=void 0,this._hoveredTargets=[]}_onDrop(e){const{currentContainer:t,currentSubTargets:r}=this.findTarget(e),s=this._basicEventHandler("drop:before",{e:e,target:t,subTargets:r,dragSource:this._dragSource,...l(this,e)});s.didDrop=!1,s.dropTarget=void 0,this._basicEventHandler("drop",s),this.fire("drop:after",s)}_onContextMenu(e){const{target:t,subTargets:r}=this.findTarget(e),s=this._basicEventHandler("contextmenu:before",{e:e,target:t,subTargets:r});return this.stopContextMenu&&i(e),this._basicEventHandler("contextmenu",s),!1}_onClick(e){const t=e.detail;t>3||t<2||(this._cacheTransformEventData(e),2==t&&"dblclick"===e.type&&this._handleEvent(e,"dblclick"),3==t&&this._handleEvent(e,"tripleclick"),this._resetTransformEventData())}fireEventFromPointerEvent(e,t,r){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};this._cacheTransformEventData(e);const{target:i,subTargets:n}=this.findTarget(e),o={e:e,target:i,subTargets:n,...l(this,e),transform:this._currentTransform,...s};this.fire(t,o),i&&i.fire(r,o);for(let e=0;e<n.length;e++)n[e]!==i&&n[e].fire(r,o);this._resetTransformEventData()}getPointerId(e){const t=e.changedTouches;return t?t[0]&&t[0].identifier:this.enablePointerEvents?e.pointerId:-1}_isMainEvent(e){return!0===e.isPrimary||!1!==e.isPrimary&&("touchend"===e.type&&0===e.touches.length||(!e.changedTouches||e.changedTouches[0].identifier===this.mainTouchId))}_onTouchStart(e){this._cacheTransformEventData(e);let t=!this.allowTouchScrolling;const r=this._activeObject;void 0===this.mainTouchId&&(this.mainTouchId=this.getPointerId(e)),this.__onMouseDown(e);const{target:s}=this.findTarget(e);(this.isDrawingMode||r&&s===r)&&(t=!0),t&&e.preventDefault();const i=this.upperCanvasEl,n=this._getEventPrefix(),o=a(i);_(o,"touchend",this._onTouchEnd,d),t&&_(o,"touchmove",this._onMouseMove,d),v(i,`${n}down`,this._onMouseDown),this._resetTransformEventData()}_onMouseDown(e){this._cacheTransformEventData(e),this.__onMouseDown(e);const t=this.upperCanvasEl,r=this._getEventPrefix();v(t,`${r}move`,this._onMouseMove,d);const s=a(t);_(s,`${r}up`,this._onMouseUp),_(s,`${r}move`,this._onMouseMove,d),this._resetTransformEventData()}_onTouchEnd(e){if(e.touches.length>0)return;this._cacheTransformEventData(e),this.__onMouseUp(e),this._resetTransformEventData(),delete this.mainTouchId;const t=this._getEventPrefix(),r=a(this.upperCanvasEl);v(r,"touchend",this._onTouchEnd,d),v(r,"touchmove",this._onMouseMove,d),this._willAddMouseDown&&clearTimeout(this._willAddMouseDown),this._willAddMouseDown=setTimeout(()=>{_(this.upperCanvasEl,`${t}down`,this._onMouseDown),this._willAddMouseDown=0},400)}_onMouseUp(e){this._cacheTransformEventData(e),this.__onMouseUp(e);const t=this.upperCanvasEl,r=this._getEventPrefix();if(this._isMainEvent(e)){const e=a(this.upperCanvasEl);v(e,`${r}up`,this._onMouseUp),v(e,`${r}move`,this._onMouseMove,d),_(t,`${r}move`,this._onMouseMove,d)}this._resetTransformEventData()}_onMouseMove(e){this._cacheTransformEventData(e);const t=this.getActiveObject();!this.allowTouchScrolling&&(!t||!t.shouldStartDragging(e))&&e.preventDefault&&e.preventDefault(),this.__onMouseMove(e),this._resetTransformEventData()}_onResize(){this.calcOffset(),this._resetTransformEventData()}_shouldRender(e){const t=this.getActiveObject();return!!t!=!!e||t&&e&&t!==e}__onMouseUp(e){var t;this._handleEvent(e,"up:before");const r=this._currentTransform,s=this._isClick,{target:i}=this.findTarget(e),{button:o}=e;if(o)return void((this.fireMiddleClick&&1===o||this.fireRightClick&&2===o)&&this._handleEvent(e,"up"));if(this.isDrawingMode&&this._isCurrentlyDrawing)return void this._onMouseUpInDrawingMode(e);if(!this._isMainEvent(e))return;let a,h,c=!1;if(r&&(this._finalizeCurrentTransform(e),c=r.actionPerformed),!s){const t=i===this._activeObject;this.handleSelection(e),c||(c=this._shouldRender(i)||!t&&i===this._activeObject)}if(i){const t=i.findControl(this.getViewportPoint(e),n(e)),{key:s,control:o}=t||{};if(h=s,i.selectable&&i!==this._activeObject&&"up"===i.activeOn)this.setActiveObject(i,e),c=!0;else if(o){const t=o.getMouseUpHandler(e,i,o);t&&(a=this.getScenePoint(e),t.call(o,e,r,a.x,a.y))}i.isMoving=!1}if(r&&(r.target!==i||r.corner!==h)){const t=r.target&&r.target.controls[r.corner],s=t&&t.getMouseUpHandler(e,r.target,t);a=a||this.getScenePoint(e),s&&s.call(t,e,r,a.x,a.y)}this._setCursorFromEvent(e,i),this._handleEvent(e,"up"),this._groupSelector=null,this._currentTransform=null,i&&(i.__corner=void 0),c?this.requestRenderAll():s||null!==(t=this._activeObject)&&void 0!==t&&t.isEditing||this.renderTop()}_basicEventHandler(e,t){const{target:r,subTargets:s=[]}=t;this.fire(e,t),r&&r.fire(e,t);for(let i=0;i<s.length;i++)s[i]!==r&&s[i].fire(e,t);return t}_handleEvent(e,t,r){const{target:s,subTargets:i}=this.findTarget(e),n={e:e,target:s,subTargets:i,...l(this,e),transform:this._currentTransform,..."down:before"===t||"down"===t?r:{}};"up:before"!==t&&"up"!==t||(n.isClick=this._isClick),this.fire(`mouse:${t}`,n),s&&s.fire(`mouse${t}`,n);for(let e=0;e<i.length;e++)i[e]!==s&&i[e].fire(`mouse${t}`,n)}_onMouseDownInDrawingMode(e){this._isCurrentlyDrawing=!0,this.getActiveObject()&&(this.discardActiveObject(e),this.requestRenderAll());const t=this.getScenePoint(e);this.freeDrawingBrush&&this.freeDrawingBrush.onMouseDown(t,{e:e,pointer:t}),this._handleEvent(e,"down",{alreadySelected:!1})}_onMouseMoveInDrawingMode(e){if(this._isCurrentlyDrawing){const t=this.getScenePoint(e);this.freeDrawingBrush&&this.freeDrawingBrush.onMouseMove(t,{e:e,pointer:t})}this.setCursor(this.freeDrawingCursor),this._handleEvent(e,"move")}_onMouseUpInDrawingMode(e){const t=this.getScenePoint(e);this.freeDrawingBrush?this._isCurrentlyDrawing=!!this.freeDrawingBrush.onMouseUp({e:e,pointer:t}):this._isCurrentlyDrawing=!1,this._handleEvent(e,"up")}__onMouseDown(e){this._isClick=!0,this._handleEvent(e,"down:before");let{target:t}=this.findTarget(e),r=!!t&&t===this._activeObject;const{button:s}=e;if(s)return void((this.fireMiddleClick&&1===s||this.fireRightClick&&2===s)&&this._handleEvent(e,"down",{alreadySelected:r}));if(this.isDrawingMode)return void this._onMouseDownInDrawingMode(e);if(!this._isMainEvent(e))return;if(this._currentTransform)return;let i=this._shouldRender(t),o=!1;if(this.handleMultiSelection(e,t)?(t=this._activeObject,o=!0,i=!0):this._shouldClearSelection(e,t)&&this.discardActiveObject(e),this.selection&&(!t||!t.selectable&&!t.isEditing&&t!==this._activeObject)){const t=this.getScenePoint(e);this._groupSelector={x:t.x,y:t.y,deltaY:0,deltaX:0}}if(r=!!t&&t===this._activeObject,t){t.selectable&&"down"===t.activeOn&&this.setActiveObject(t,e);const s=t.findControl(this.getViewportPoint(e),n(e));if(t===this._activeObject&&(s||!o)){this._setupCurrentTransform(e,t,r);const i=s?s.control:void 0,n=this.getScenePoint(e),o=i&&i.getMouseDownHandler(e,t,i);o&&o.call(i,e,this._currentTransform,n.x,n.y)}}i&&(this._objectsToRender=void 0),this._handleEvent(e,"down",{alreadySelected:r}),i&&this.requestRenderAll()}_resetTransformEventData(){this._targetInfo=this._viewportPoint=this._scenePoint=void 0}_cacheTransformEventData(e){this._resetTransformEventData(),this._viewportPoint=this.getViewportPoint(e),this._scenePoint=h(this._viewportPoint,void 0,this.viewportTransform),this._targetInfo=this.findTarget(e),this._currentTransform&&(this._targetInfo.target=this._currentTransform.target)}__onMouseMove(e){if(this._isClick=!1,this._handleEvent(e,"move:before"),this.isDrawingMode)return void this._onMouseMoveInDrawingMode(e);if(!this._isMainEvent(e))return;const t=this._groupSelector;if(t){const r=this.getScenePoint(e);t.deltaX=r.x-t.x,t.deltaY=r.y-t.y,this.renderTop()}else if(this._currentTransform)this._transformObject(e);else{const{target:t}=this.findTarget(e);this._setCursorFromEvent(e,t),this._fireOverOutEvents(e,t)}this.textEditingManager.onMouseMove(e),this._handleEvent(e,"move")}_fireOverOutEvents(e,t){const{_hoveredTarget:r,_hoveredTargets:s}=this,{subTargets:i}=this.findTarget(e),n=Math.max(s.length,i.length);this.fireSyntheticInOutEvents("mouse",{e:e,target:t,oldTarget:r,fireCanvas:!0});for(let o=0;o<n;o++)i[o]===t||s[o]&&s[o]===r||this.fireSyntheticInOutEvents("mouse",{e:e,target:i[o],oldTarget:s[o]});this._hoveredTarget=t,this._hoveredTargets=i}_fireEnterLeaveEvents(e,t,r){const s=this._draggedoverTarget,i=this._hoveredTargets,{subTargets:n}=this.findTarget(e),o=Math.max(i.length,n.length);this.fireSyntheticInOutEvents("drag",{...r,target:t,oldTarget:s,fireCanvas:!0});for(let e=0;e<o;e++)this.fireSyntheticInOutEvents("drag",{...r,target:n[e],oldTarget:i[e]});this._draggedoverTarget=t}fireSyntheticInOutEvents(e,t){let{target:r,oldTarget:s,fireCanvas:i,e:n,...o}=t;const{targetIn:a,targetOut:h,canvasIn:c,canvasOut:u}=f[e],g=s!==r;if(s&&g){const e={...o,e:n,target:s,nextTarget:r,...l(this,n)};i&&this.fire(u,e),s.fire(h,e)}if(r&&g){const e={...o,e:n,target:r,previousTarget:s,...l(this,n)};i&&this.fire(c,e),r.fire(a,e)}}_transformObject(e){const t=this.getScenePoint(e),r=this._currentTransform,s=r.target,i=s.group?h(t,void 0,s.group.calcTransformMatrix()):t;r.shiftKey=e.shiftKey,r.altKey=!!this.centeredKey&&e[this.centeredKey],this._performTransformAction(e,r,i),r.actionPerformed&&this.requestRenderAll()}_performTransformAction(e,t,r){const{action:s,actionHandler:i,target:n}=t,o=!!i&&i(e,t,r.x,r.y);o&&n.setCoords(),"drag"===s&&o&&(t.target.isMoving=!0,this.setCursor(t.target.moveCursor||this.moveCursor)),t.actionPerformed=t.actionPerformed||o}_setCursorFromEvent(e,t){if(!t)return void this.setCursor(this.defaultCursor);let r=t.hoverCursor||this.hoverCursor;const s=c(this._activeObject)?this._activeObject:null,i=(!s||t.group!==s)&&t.findControl(this.getViewportPoint(e));if(i){const{control:r,coord:s}=i;this.setCursor(r.cursorStyleHandler(e,r,t,s))}else{if(t.subTargetCheck){const{subTargets:t}=this.findTarget(e);t.concat().reverse().forEach(e=>{r=e.hoverCursor||r})}this.setCursor(r)}}handleMultiSelection(e,r){const s=this._activeObject,i=c(s);if(s&&this._isSelectionKeyPressed(e)&&this.selection&&r&&r.selectable&&(s!==r||i)&&(i||!r.isDescendantOf(s)&&!s.isDescendantOf(r))&&!r.onSelect({e:e})&&!s.getActiveControl()){if(i){const t=s.getObjects();let i=[];if(r===s){const s=this.getScenePoint(e);let n=this.searchPossibleTargets(t,s);if(n.target?(r=n.target,i=n.subTargets):(n=this.searchPossibleTargets(this._objects,s),r=n.target,i=n.subTargets),!r||!r.selectable)return!1}r.group===s?(s.remove(r),this._hoveredTarget=r,this._hoveredTargets=i,1===s.size()&&this._setActiveObject(s.item(0),e)):(s.multiSelectAdd(r),this._hoveredTarget=s,this._hoveredTargets=i),this._fireSelectionEvents(t,e)}else{s.isEditing&&s.exitEditing();const i=new(t.getClass("ActiveSelection"))([],{canvas:this});i.multiSelectAdd(s,r),this._hoveredTarget=i,this._setActiveObject(i,e),this._fireSelectionEvents([s],e)}return!0}return!1}handleSelection(e){if(!this.selection||!this._groupSelector)return!1;const{x:r,y:i,deltaX:n,deltaY:o}=this._groupSelector,a=new s(r,i),h=a.add(new s(n,o)),c=a.min(h),u=a.max(h).subtract(c),g=this.collectObjects({left:c.x,top:c.y,width:u.x,height:u.y},{includeIntersecting:!this.selectionFullyContained}),d=a.eq(h)?g[0]?[g[0]]:[]:g.length>1?g.filter(t=>!t.onSelect({e:e})).reverse():g;if(1===d.length)this.setActiveObject(d[0],e);else if(d.length>1){const r=t.getClass("ActiveSelection");this.setActiveObject(new r(d,{canvas:this}),e)}return this._groupSelector=null,!0}toCanvasElement(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments.length>1?arguments[1]:void 0;const{upper:r}=this.elements;r.ctx=void 0;const s=super.toCanvasElement(e,t);return r.ctx=r.el.getContext("2d"),s}clear(){this.textEditingManager.clear(),super.clear()}destroy(){this.removeListeners(),this.textEditingManager.dispose(),super.destroy()}}export{m as Canvas};
//# sourceMappingURL=Canvas.min.mjs.map