fabric/dist/src/canvas/SelectableCanvas.min.mjs

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

import{defineProperty as t}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{getActionFromCorner as e}from"../controls/util.min.mjs";import{Point as r}from"../Point.min.mjs";import{FabricObject as i}from"../shapes/Object/FabricObject.min.mjs";import{saveObjectTransform as s,addTransformToObject as n}from"../util/misc/objectTransforms.min.mjs";import{StaticCanvas as o}from"./StaticCanvas.min.mjs";import{isCollection as c}from"../Collection.min.mjs";import{isTransparent as a}from"../util/misc/isTransparent.min.mjs";import{degreesToRadians as l}from"../util/misc/radiansDegreesConversion.min.mjs";import{isTouchEvent as h,getPointer as m}from"../util/dom_event.min.mjs";import{pick as d}from"../util/misc/pick.min.mjs";import{sendPointToPlane as g}from"../util/misc/planeChange.min.mjs";import{cos as u}from"../util/misc/cos.min.mjs";import{sin as p}from"../util/misc/sin.min.mjs";import"../util/misc/vectors.min.mjs";import"../util/misc/projectStroke/StrokeLineJoinProjections.min.mjs";import{SCALE as f,SCALE_X as _,SCALE_Y as v,RESIZING as b,ROTATE as j,RIGHT as T,LEFT as x,BOTTOM as C,TOP as O,CENTER as y,MODIFIED as w,SKEW_X as S,SKEW_Y as P}from"../constants.min.mjs";import"../config.min.mjs";import{createCanvasElement as A}from"../util/misc/dom.min.mjs";import"../shapes/Group.min.mjs";import"../cache.min.mjs";import"../parser/constants.min.mjs";import"../util/animation/AnimationRegistry.min.mjs";import{CanvasDOMManager as D}from"./DOMManagers/CanvasDOMManager.min.mjs";import{canvasDefaults as R}from"./CanvasOptions.min.mjs";import{Intersection as k}from"../Intersection.min.mjs";import{isActiveSelection as F}from"../util/typeAssertions.min.mjs";import{dragHandler as M}from"../controls/drag.min.mjs";class E extends o{constructor(){super(...arguments),t(this,"_hoveredTargets",[]),t(this,"_currentTransform",null),t(this,"_groupSelector",null),t(this,"contextTopDirty",!1)}static getDefaults(){return{...super.getDefaults(),...E.ownDefaults}}get upperCanvasEl(){var t;return null===(t=this.elements.upper)||void 0===t?void 0:t.el}get contextTop(){var t;return null===(t=this.elements.upper)||void 0===t?void 0:t.ctx}get wrapperEl(){return this.elements.container}initElements(t){this.elements=new D(t,{allowTouchScrolling:this.allowTouchScrolling,containerClass:this.containerClass}),this._createCacheCanvas()}_onObjectAdded(t){this._objectsToRender=void 0,super._onObjectAdded(t)}_onObjectRemoved(t){this._objectsToRender=void 0,t===this._activeObject&&(this.fire("before:selection:cleared",{deselected:[t]}),this._discardActiveObject(),this.fire("selection:cleared",{deselected:[t]}),t.fire("deselected",{target:t})),t===this._hoveredTarget&&(this._hoveredTarget=void 0,this._hoveredTargets=[]),super._onObjectRemoved(t)}_onStackOrderChanged(){this._objectsToRender=void 0,super._onStackOrderChanged()}_chooseObjectsToRender(){const t=this._activeObject;return!this.preserveObjectStacking&&t?this._objects.filter(e=>!e.group&&e!==t).concat(t):this._objects}renderAll(){this.cancelRequestedRender(),this.destroyed||(!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1),this.hasLostContext&&(this.renderTopLayer(this.contextTop),this.hasLostContext=!1),!this._objectsToRender&&(this._objectsToRender=this._chooseObjectsToRender()),this.renderCanvas(this.getContext(),this._objectsToRender))}renderTopLayer(t){t.save(),this.isDrawingMode&&this._isCurrentlyDrawing&&(this.freeDrawingBrush&&this.freeDrawingBrush._render(),this.contextTopDirty=!0),this.selection&&this._groupSelector&&(this._drawSelection(t),this.contextTopDirty=!0),t.restore()}renderTop(){const t=this.contextTop;this.clearContext(t),this.renderTopLayer(t),this.fire("after:render",{ctx:t})}setTargetFindTolerance(t){t=Math.round(t),this.targetFindTolerance=t;const e=this.getRetinaScaling(),r=Math.ceil((2*t+1)*e);this.pixelFindCanvasEl.width=this.pixelFindCanvasEl.height=r,this.pixelFindContext.scale(e,e)}isTargetTransparent(t,e,r){const i=this.targetFindTolerance,s=this.pixelFindContext;this.clearContext(s),s.save(),s.translate(-e+i,-r+i),s.transform(...this.viewportTransform);const n=t.selectionBackgroundColor;t.selectionBackgroundColor="",t.render(s),t.selectionBackgroundColor=n,s.restore();const o=Math.round(i*this.getRetinaScaling());return a(s,o,o,o)}_isSelectionKeyPressed(t){const e=this.selectionKey;return!!e&&(Array.isArray(e)?!!e.find(e=>!!e&&!0===t[e]):t[e])}_shouldClearSelection(t,e){const r=this.getActiveObjects(),i=this._activeObject;return!!(!e||e&&i&&r.length>1&&-1===r.indexOf(e)&&i!==e&&!this._isSelectionKeyPressed(t)||e&&!e.evented||e&&!e.selectable&&i&&i!==e)}_shouldCenterTransform(t,e,r){if(!t)return;let i;return e===f||e===_||e===v||e===b?i=this.centeredScaling||t.centeredScaling:e===j&&(i=this.centeredRotation||t.centeredRotation),i?!r:r}_getOriginFromCorner(t,e){const r={x:t.originX,y:t.originY};return e?(["ml","tl","bl"].includes(e)?r.x=T:["mr","tr","br"].includes(e)&&(r.x=x),["tl","mt","tr"].includes(e)?r.y=C:["bl","mb","br"].includes(e)&&(r.y=O),r):r}_setupCurrentTransform(t,r,i){var n;const o=r.group?g(this.getScenePoint(t),void 0,r.group.calcTransformMatrix()):this.getScenePoint(t),{key:c="",control:a}=r.getActiveControl()||{},h=i&&a?null===(n=a.getActionHandler(t,r,a))||void 0===n?void 0:n.bind(a):M,m=e(i,c,t,r),d=t[this.centeredKey],u=this._shouldCenterTransform(r,m,d)?{x:y,y:y}:this._getOriginFromCorner(r,c),{scaleX:p,scaleY:f,skewX:_,skewY:v,left:b,top:j,angle:T,width:x,height:C,cropX:O,cropY:w}=r,S={target:r,action:m,actionHandler:h,actionPerformed:!1,corner:c,scaleX:p,scaleY:f,skewX:_,skewY:v,offsetX:o.x-b,offsetY:o.y-j,originX:u.x,originY:u.y,ex:o.x,ey:o.y,lastX:o.x,lastY:o.y,theta:l(T),width:x,height:C,shiftKey:t.shiftKey,altKey:d,original:{...s(r),originX:u.x,originY:u.y,cropX:O,cropY:w}};this._currentTransform=S,this.fire("before:transform",{e:t,transform:S})}setCursor(t){this.upperCanvasEl.style.cursor=t}_drawSelection(t){const{x:e,y:s,deltaX:n,deltaY:o}=this._groupSelector,c=new r(e,s).transform(this.viewportTransform),a=new r(e+n,s+o).transform(this.viewportTransform),l=this.selectionLineWidth/2;let h=Math.min(c.x,a.x),m=Math.min(c.y,a.y),d=Math.max(c.x,a.x),g=Math.max(c.y,a.y);this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(h,m,d-h,g-m)),this.selectionLineWidth&&this.selectionBorderColor&&(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,h+=l,m+=l,d-=l,g-=l,i.prototype._setLineDash.call(this,t,this.selectionDashArray),t.strokeRect(h,m,d-h,g-m))}findTarget(t){if(this._targetInfo)return this._targetInfo;if(this.skipTargetFind)return{subTargets:[],currentSubTargets:[]};const e=this.getScenePoint(t),r=this._activeObject,i=this.getActiveObjects(),s=this.searchPossibleTargets(this._objects,e),{subTargets:n,container:o,target:c}=s,a={...s,currentSubTargets:n,currentContainer:o,currentTarget:c};if(!r)return a;const l={...this.searchPossibleTargets([r],e),currentSubTargets:n,currentContainer:o,currentTarget:c};if(r.findControl(this.getViewportPoint(t),h(t)))return{...l,target:r};if(l.target){if(i.length>1)return l;if(!this.preserveObjectStacking)return l;if(this.preserveObjectStacking&&t[this.altSelectionKey])return l}return a}_pointIsInObjectSelectionArea(t,e){let i=t.getCoords();const s=this.getZoom(),n=t.padding/s;if(n){const[t,e,s,o]=i,c=Math.atan2(e.y-t.y,e.x-t.x),a=u(c)*n,l=p(c)*n,h=a+l,m=a-l;i=[new r(t.x-m,t.y-h),new r(e.x+h,e.y-m),new r(s.x+m,s.y+h),new r(o.x-h,o.y+m)]}return k.isPointInPolygon(e,i)}_checkTarget(t,e){if(t&&t.visible&&t.evented&&this._pointIsInObjectSelectionArea(t,e)){if(!this.perPixelTargetFind&&!t.perPixelTargetFind||t.isEditing)return!0;{const r=e.transform(this.viewportTransform);if(!this.isTargetTransparent(t,r.x,r.y))return!0}}return!1}_searchPossibleTargets(t,e,r){let i=t.length;for(;i--;){const s=t[i];if(this._checkTarget(s,e)){if(c(s)&&s.subTargetCheck){const{target:t}=this._searchPossibleTargets(s._objects,e,r);t&&r.push(t)}return{target:s,subTargets:r}}}return{subTargets:[]}}searchPossibleTargets(t,e){const r=this._searchPossibleTargets(t,e,[]);r.container=r.target;const{container:i,subTargets:s}=r;if(i&&c(i)&&i.interactive&&s[0]){for(let t=s.length-1;t>0;t--){const e=s[t];if(!c(e)||!e.interactive)return r.target=e,r}return r.target=s[0],r}return r}getViewportPoint(t){return this._viewportPoint?this._viewportPoint:this._getPointerImpl(t,!0)}getScenePoint(t){return this._scenePoint?this._scenePoint:this._getPointerImpl(t)}_getPointerImpl(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const i=this.upperCanvasEl,s=i.getBoundingClientRect();let n=m(t),o=s.width||0,c=s.height||0;o&&c||(O in s&&C in s&&(c=Math.abs(s.top-s.bottom)),T in s&&x in s&&(o=Math.abs(s.right-s.left))),this.calcOffset(),n.x=n.x-this._offset.left,n.y=n.y-this._offset.top,e||(n=g(n,void 0,this.viewportTransform));const a=this.getRetinaScaling();1!==a&&(n.x/=a,n.y/=a);const l=0===o||0===c?new r(1,1):new r(i.width/o,i.height/c);return n.multiply(l)}_setDimensionsImpl(t,e){this._resetTransformEventData(),super._setDimensionsImpl(t,e),this._isCurrentlyDrawing&&this.freeDrawingBrush&&this.freeDrawingBrush._setBrushStyles(this.contextTop)}_createCacheCanvas(){this.pixelFindCanvasEl=A(),this.pixelFindContext=this.pixelFindCanvasEl.getContext("2d",{willReadFrequently:!0}),this.setTargetFindTolerance(this.targetFindTolerance)}getTopContext(){return this.elements.upper.ctx}getSelectionContext(){return this.elements.upper.ctx}getSelectionElement(){return this.elements.upper.el}getActiveObject(){return this._activeObject}getActiveObjects(){const t=this._activeObject;return F(t)?t.getObjects():t?[t]:[]}_fireSelectionEvents(t,e){let r=!1,i=!1;const s=this.getActiveObjects(),n=[],o=[];t.forEach(t=>{s.includes(t)||(r=!0,t.fire("deselected",{e:e,target:t}),o.push(t))}),s.forEach(i=>{t.includes(i)||(r=!0,i.fire("selected",{e:e,target:i}),n.push(i))}),t.length>0&&s.length>0?(i=!0,r&&this.fire("selection:updated",{e:e,selected:n,deselected:o})):s.length>0?(i=!0,this.fire("selection:created",{e:e,selected:n})):t.length>0&&(i=!0,this.fire("selection:cleared",{e:e,deselected:o})),i&&(this._objectsToRender=void 0)}setActiveObject(t,e){const r=this.getActiveObjects(),i=this._setActiveObject(t,e);return this._fireSelectionEvents(r,e),i}_setActiveObject(t,e){const r=this._activeObject;return r!==t&&(!(!this._discardActiveObject(e,t)&&this._activeObject)&&(!t.onSelect({e:e})&&(this._activeObject=t,F(t)&&r!==t&&t.set("canvas",this),t.setCoords(),!0)))}_discardActiveObject(t,e){const r=this._activeObject;return!!r&&(!r.onDeselect({e:t,object:e})&&(this._currentTransform&&this._currentTransform.target===r&&this.endCurrentTransform(t),F(r)&&r===this._hoveredTarget&&(this._hoveredTarget=void 0),this._activeObject=void 0,!0))}discardActiveObject(t){const e=this.getActiveObjects(),r=this.getActiveObject();e.length&&this.fire("before:selection:cleared",{e:t,deselected:[r]});const i=this._discardActiveObject(t);return this._fireSelectionEvents(e,t),i}endCurrentTransform(t){const e=this._currentTransform;this._finalizeCurrentTransform(t),e&&e.target&&(e.target.isMoving=!1),this._currentTransform=null}_finalizeCurrentTransform(t){const e=this._currentTransform,r=e.target,i={e:t,target:r,transform:e,action:e.action};r._scaling&&(r._scaling=!1),r.setCoords(),e.actionPerformed&&(this.fire("object:modified",i),r.fire(w,i))}setViewportTransform(t){super.setViewportTransform(t);const e=this._activeObject;e&&e.setCoords()}destroy(){const t=this._activeObject;F(t)&&(t.removeAll(),t.dispose()),delete this._activeObject,super.destroy(),this.pixelFindContext=null,this.pixelFindCanvasEl=void 0}clear(){this.discardActiveObject(),this._activeObject=void 0,this.clearContext(this.contextTop),super.clear()}drawControls(t){const e=this._activeObject;e&&e._renderControls(t)}_toObject(t,e,r){const i=this._realizeGroupTransformOnObject(t),s=super._toObject(t,e,r);return t.set(i),s}_realizeGroupTransformOnObject(t){const{group:e}=t;if(e&&F(e)&&this._activeObject===e){const r=d(t,["angle","flipX","flipY",x,_,v,S,P,O]);return n(t,e.calcOwnMatrix()),r}return{}}_setSVGObject(t,e,r){const i=this._realizeGroupTransformOnObject(e);super._setSVGObject(t,e,r),e.set(i)}}t(E,"ownDefaults",R);export{E as SelectableCanvas};
//# sourceMappingURL=SelectableCanvas.min.mjs.map