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