File: /var/www/html/tmpr/..//tmpr/../tmpr/../tmpr/..//tmpr/../node_modules/fabric/src/canvas.class.js
(function() {
var getPointer = fabric.util.getPointer,
degreesToRadians = fabric.util.degreesToRadians,
isTouchEvent = fabric.util.isTouchEvent;
/**
* Canvas class
* @class fabric.Canvas
* @extends fabric.StaticCanvas
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas}
* @see {@link fabric.Canvas#initialize} for constructor definition
*
* @fires object:modified at the end of a transform or any change when statefull is true
* @fires object:rotating while an object is being rotated from the control
* @fires object:scaling while an object is being scaled by controls
* @fires object:moving while an object is being dragged
* @fires object:skewing while an object is being skewed from the controls
*
* @fires before:transform before a transform is is started
* @fires before:selection:cleared
* @fires selection:cleared
* @fires selection:updated
* @fires selection:created
*
* @fires path:created after a drawing operation ends and the path is added
* @fires mouse:down
* @fires mouse:move
* @fires mouse:up
* @fires mouse:down:before on mouse down, before the inner fabric logic runs
* @fires mouse:move:before on mouse move, before the inner fabric logic runs
* @fires mouse:up:before on mouse up, before the inner fabric logic runs
* @fires mouse:over
* @fires mouse:out
* @fires mouse:dblclick whenever a native dbl click event fires on the canvas.
*
* @fires dragover
* @fires dragenter
* @fires dragleave
* @fires drop:before before drop event. same native event. This is added to handle edge cases
* @fires drop
* @fires after:render at the end of the render process, receives the context in the callback
* @fires before:render at start the render process, receives the context in the callback
*
*/
fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {
/**
* Constructor
* @param {HTMLElement | String} el <canvas> element to initialize instance on
* @param {Object} [options] Options object
* @return {Object} thisArg
*/
initialize: function(el, options) {
options || (options = { });
this.renderAndResetBound = this.renderAndReset.bind(this);
this.requestRenderAllBound = this.requestRenderAll.bind(this);
this._initStatic(el, options);
this._initInteractive();
this._createCacheCanvas();
},
/**
* When true, objects can be transformed by one side (unproportionally)
* when dragged on the corners that normally would not do that.
* @type Boolean
* @default
* @since fabric 4.0 // changed name and default value
*/
uniformScaling: true,
/**
* Indicates which key switches uniform scaling.
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* If `null` or 'none' or any other string that is not a modifier key
* feature is disabled.
* totally wrong named. this sounds like `uniform scaling`
* if Canvas.uniformScaling is true, pressing this will set it to false
* and viceversa.
* @since 1.6.2
* @type String
* @default
*/
uniScaleKey: 'shiftKey',
/**
* When true, objects use center point as the origin of scale transformation.
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
* @since 1.3.4
* @type Boolean
* @default
*/
centeredScaling: false,
/**
* When true, objects use center point as the origin of rotate transformation.
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
* @since 1.3.4
* @type Boolean
* @default
*/
centeredRotation: false,
/**
* Indicates which key enable centered Transform
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* If `null` or 'none' or any other string that is not a modifier key
* feature is disabled feature disabled.
* @since 1.6.2
* @type String
* @default
*/
centeredKey: 'altKey',
/**
* Indicates which key enable alternate action on corner
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* If `null` or 'none' or any other string that is not a modifier key
* feature is disabled feature disabled.
* @since 1.6.2
* @type String
* @default
*/
altActionKey: 'shiftKey',
/**
* Indicates that canvas is interactive. This property should not be changed.
* @type Boolean
* @default
*/
interactive: true,
/**
* Indicates whether group selection should be enabled
* @type Boolean
* @default
*/
selection: true,
/**
* Indicates which key or keys enable multiple click selection
* Pass value as a string or array of strings
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* If `null` or empty or containing any other string that is not a modifier key
* feature is disabled.
* @since 1.6.2
* @type String|Array
* @default
*/
selectionKey: 'shiftKey',
/**
* Indicates which key enable alternative selection
* in case of target overlapping with active object
* values: 'altKey', 'shiftKey', 'ctrlKey'.
* For a series of reason that come from the general expectations on how
* things should work, this feature works only for preserveObjectStacking true.
* If `null` or 'none' or any other string that is not a modifier key
* feature is disabled.
* @since 1.6.5
* @type null|String
* @default
*/
altSelectionKey: null,
/**
* Color of selection
* @type String
* @default
*/
selectionColor: 'rgba(100, 100, 255, 0.3)', // blue
/**
* Default dash array pattern
* If not empty the selection border is dashed
* @type Array
*/
selectionDashArray: [],
/**
* Color of the border of selection (usually slightly darker than color of selection itself)
* @type String
* @default
*/
selectionBorderColor: 'rgba(255, 255, 255, 0.3)',
/**
* Width of a line used in object/group selection
* @type Number
* @default
*/
selectionLineWidth: 1,
/**
* Select only shapes that are fully contained in the dragged selection rectangle.
* @type Boolean
* @default
*/
selectionFullyContained: false,
/**
* Default cursor value used when hovering over an object on canvas
* @type String
* @default
*/
hoverCursor: 'move',
/**
* Default cursor value used when moving an object on canvas
* @type String
* @default
*/
moveCursor: 'move',
/**
* Default cursor value used for the entire canvas
* @type String
* @default
*/
defaultCursor: 'default',
/**
* Cursor value used during free drawing
* @type String
* @default
*/
freeDrawingCursor: 'crosshair',
/**
* Cursor value used for disabled elements ( corners with disabled action )
* @type String
* @since 2.0.0
* @default
*/
notAllowedCursor: 'not-allowed',
/**
* Default element class that's given to wrapper (div) element of canvas
* @type String
* @default
*/
containerClass: 'canvas-container',
/**
* When true, object detection happens on per-pixel basis rather than on per-bounding-box
* @type Boolean
* @default
*/
perPixelTargetFind: false,
/**
* Number of pixels around target pixel to tolerate (consider active) during object detection
* @type Number
* @default
*/
targetFindTolerance: 0,
/**
* When true, target detection is skipped. Target detection will return always undefined.
* click selection won't work anymore, events will fire with no targets.
* if something is selected before setting it to true, it will be deselected at the first click.
* area selection will still work. check the `selection` property too.
* if you deactivate both, you should look into staticCanvas.
* @type Boolean
* @default
*/
skipTargetFind: false,
/**
* When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing.
* After mousedown, mousemove creates a shape,
* and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas.
* @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing}
* @type Boolean
* @default
*/
isDrawingMode: false,
/**
* Indicates whether objects should remain in current stack position when selected.
* When false objects are brought to top and rendered as part of the selection group
* @type Boolean
* @default
*/
preserveObjectStacking: false,
/**
* Indicates the angle that an object will lock to while rotating.
* @type Number
* @since 1.6.7
* @default
*/
snapAngle: 0,
/**
* Indicates the distance from the snapAngle the rotation will lock to the snapAngle.
* When `null`, the snapThreshold will default to the snapAngle.
* @type null|Number
* @since 1.6.7
* @default
*/
snapThreshold: null,
/**
* Indicates if the right click on canvas can output the context menu or not
* @type Boolean
* @since 1.6.5
* @default
*/
stopContextMenu: false,
/**
* Indicates if the canvas can fire right click events
* @type Boolean
* @since 1.6.5
* @default
*/
fireRightClick: false,
/**
* Indicates if the canvas can fire middle click events
* @type Boolean
* @since 1.7.8
* @default
*/
fireMiddleClick: false,
/**
* Keep track of the subTargets for Mouse Events
* @type fabric.Object[]
*/
targets: [],
/**
* When the option is enabled, PointerEvent is used instead of MouseEvent.
* @type Boolean
* @default
*/
enablePointerEvents: false,
/**
* Keep track of the hovered target
* @type fabric.Object
* @private
*/
_hoveredTarget: null,
/**
* hold the list of nested targets hovered
* @type fabric.Object[]
* @private
*/
_hoveredTargets: [],
/**
* @private
*/
_initInteractive: function() {
this._currentTransform = null;
this._groupSelector = null;
this._initWrapperElement();
this._createUpperCanvas();
this._initEventListeners();
this._initRetinaScaling();
this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this);
this.calcOffset();
},
/**
* Divides objects in two groups, one to render immediately
* and one to render as activeGroup.
* @return {Array} objects to render immediately and pushes the other in the activeGroup.
*/
_chooseObjectsToRender: function() {
var activeObjects = this.getActiveObjects(),
object, objsToRender, activeGroupObjects;
if (activeObjects.length > 0 && !this.preserveObjectStacking) {
objsToRender = [];
activeGroupObjects = [];
for (var i = 0, length = this._objects.length; i < length; i++) {
object = this._objects[i];
if (activeObjects.indexOf(object) === -1 ) {
objsToRender.push(object);
}
else {
activeGroupObjects.push(object);
}
}
if (activeObjects.length > 1) {
this._activeObject._objects = activeGroupObjects;
}
objsToRender.push.apply(objsToRender, activeGroupObjects);
}
else {
objsToRender = this._objects;
}
return objsToRender;
},
/**
* Renders both the top canvas and the secondary container canvas.
* @return {fabric.Canvas} instance
* @chainable
*/
renderAll: function () {
if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) {
this.clearContext(this.contextTop);
this.contextTopDirty = false;
}
if (this.hasLostContext) {
this.renderTopLayer(this.contextTop);
this.hasLostContext = false;
}
var canvasToDrawOn = this.contextContainer;
this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender());
return this;
},
renderTopLayer: function(ctx) {
ctx.save();
if (this.isDrawingMode && this._isCurrentlyDrawing) {
this.freeDrawingBrush && this.freeDrawingBrush._render();
this.contextTopDirty = true;
}
// we render the top context - last object
if (this.selection && this._groupSelector) {
this._drawSelection(ctx);
this.contextTopDirty = true;
}
ctx.restore();
},
/**
* Method to render only the top canvas.
* Also used to render the group selection box.
* @return {fabric.Canvas} thisArg
* @chainable
*/
renderTop: function () {
var ctx = this.contextTop;
this.clearContext(ctx);
this.renderTopLayer(ctx);
this.fire('after:render');
return this;
},
/**
* @private
*/
_normalizePointer: function (object, pointer) {
var m = object.calcTransformMatrix(),
invertedM = fabric.util.invertTransform(m),
vptPointer = this.restorePointerVpt(pointer);
return fabric.util.transformPoint(vptPointer, invertedM);
},
/**
* Returns true if object is transparent at a certain location
* @param {fabric.Object} target Object to check
* @param {Number} x Left coordinate
* @param {Number} y Top coordinate
* @return {Boolean}
*/
isTargetTransparent: function (target, x, y) {
// in case the target is the activeObject, we cannot execute this optimization
// because we need to draw controls too.
if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) {
var normalizedPointer = this._normalizePointer(target, {x: x, y: y}),
targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0),
targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0);
var isTransparent = fabric.util.isTransparent(
target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance);
return isTransparent;
}
var ctx = this.contextCache,
originalColor = target.selectionBackgroundColor, v = this.viewportTransform;
target.selectionBackgroundColor = '';
this.clearContext(ctx);
ctx.save();
ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
target.render(ctx);
ctx.restore();
target.selectionBackgroundColor = originalColor;
var isTransparent = fabric.util.isTransparent(
ctx, x, y, this.targetFindTolerance);
return isTransparent;
},
/**
* takes an event and determines if selection key has been pressed
* @private
* @param {Event} e Event object
*/
_isSelectionKeyPressed: function(e) {
var selectionKeyPressed = false;
if (Array.isArray(this.selectionKey)) {
selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; });
}
else {
selectionKeyPressed = e[this.selectionKey];
}
return selectionKeyPressed;
},
/**
* @private
* @param {Event} e Event object
* @param {fabric.Object} target
*/
_shouldClearSelection: function (e, target) {
var activeObjects = this.getActiveObjects(),
activeObject = this._activeObject;
return (
!target
||
(target &&
activeObject &&
activeObjects.length > 1 &&
activeObjects.indexOf(target) === -1 &&
activeObject !== target &&
!this._isSelectionKeyPressed(e))
||
(target && !target.evented)
||
(target &&
!target.selectable &&
activeObject &&
activeObject !== target)
);
},
/**
* centeredScaling from object can't override centeredScaling from canvas.
* this should be fixed, since object setting should take precedence over canvas.
* also this should be something that will be migrated in the control properties.
* as ability to define the origin of the transformation that the control provide.
* @private
* @param {fabric.Object} target
* @param {String} action
* @param {Boolean} altKey
*/
_shouldCenterTransform: function (target, action, altKey) {
if (!target) {
return;
}
var centerTransform;
if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') {
centerTransform = this.centeredScaling || target.centeredScaling;
}
else if (action === 'rotate') {
centerTransform = this.centeredRotation || target.centeredRotation;
}
return centerTransform ? !altKey : altKey;
},
/**
* should disappear before release 4.0
* @private
*/
_getOriginFromCorner: function(target, corner) {
var origin = {
x: target.originX,
y: target.originY
};
if (corner === 'ml' || corner === 'tl' || corner === 'bl') {
origin.x = 'right';
}
else if (corner === 'mr' || corner === 'tr' || corner === 'br') {
origin.x = 'left';
}
if (corner === 'tl' || corner === 'mt' || corner === 'tr') {
origin.y = 'bottom';
}
else if (corner === 'bl' || corner === 'mb' || corner === 'br') {
origin.y = 'top';
}
return origin;
},
/**
* @private
* @param {Boolean} alreadySelected true if target is already selected
* @param {String} corner a string representing the corner ml, mr, tl ...
* @param {Event} e Event object
* @param {fabric.Object} [target] inserted back to help overriding. Unused
*/
_getActionFromCorner: function(alreadySelected, corner, e, target) {
if (!corner || !alreadySelected) {
return 'drag';
}
var control = target.controls[corner];
return control.getActionName(e, control, target);
},
/**
* @private
* @param {Event} e Event object
* @param {fabric.Object} target
*/
_setupCurrentTransform: function (e, target, alreadySelected) {
if (!target) {
return;
}
var pointer = this.getPointer(e), corner = target.__corner,
control = target.controls[corner],
actionHandler = (alreadySelected && corner) ?
control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler,
action = this._getActionFromCorner(alreadySelected, corner, e, target),
origin = this._getOriginFromCorner(target, corner),
altKey = e[this.centeredKey],
transform = {
target: target,
action: action,
actionHandler: actionHandler,
corner: corner,
scaleX: target.scaleX,
scaleY: target.scaleY,
skewX: target.skewX,
skewY: target.skewY,
// used by transation
offsetX: pointer.x - target.left,
offsetY: pointer.y - target.top,
originX: origin.x,
originY: origin.y,
ex: pointer.x,
ey: pointer.y,
lastX: pointer.x,
lastY: pointer.y,
// unsure they are useful anymore.
// left: target.left,
// top: target.top,
theta: degreesToRadians(target.angle),
// end of unsure
width: target.width * target.scaleX,
shiftKey: e.shiftKey,
altKey: altKey,
original: fabric.util.saveObjectTransform(target),
};
if (this._shouldCenterTransform(target, action, altKey)) {
transform.originX = 'center';
transform.originY = 'center';
}
transform.original.originX = origin.x;
transform.original.originY = origin.y;
this._currentTransform = transform;
this._beforeTransform(e);
},
/**
* Set the cursor type of the canvas element
* @param {String} value Cursor type of the canvas element.
* @see http://www.w3.org/TR/css3-ui/#cursor
*/
setCursor: function (value) {
this.upperCanvasEl.style.cursor = value;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx to draw the selection on
*/
_drawSelection: function (ctx) {
var selector = this._groupSelector,
viewportStart = new fabric.Point(selector.ex, selector.ey),
start = fabric.util.transformPoint(viewportStart, this.viewportTransform),
viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top),
extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform),
minX = Math.min(start.x, extent.x),
minY = Math.min(start.y, extent.y),
maxX = Math.max(start.x, extent.x),
maxY = Math.max(start.y, extent.y),
strokeOffset = this.selectionLineWidth / 2;
if (this.selectionColor) {
ctx.fillStyle = this.selectionColor;
ctx.fillRect(minX, minY, maxX - minX, maxY - minY);
}
if (!this.selectionLineWidth || !this.selectionBorderColor) {
return;
}
ctx.lineWidth = this.selectionLineWidth;
ctx.strokeStyle = this.selectionBorderColor;
minX += strokeOffset;
minY += strokeOffset;
maxX -= strokeOffset;
maxY -= strokeOffset;
// selection border
fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray);
ctx.strokeRect(minX, minY, maxX - minX, maxY - minY);
},
/**
* Method that determines what object we are clicking on
* the skipGroup parameter is for internal use, is needed for shift+click action
* 11/09/2018 TODO: would be cool if findTarget could discern between being a full target
* or the outside part of the corner.
* @param {Event} e mouse event
* @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through
* @return {fabric.Object} the target found
*/
findTarget: function (e, skipGroup) {
if (this.skipTargetFind) {
return;
}
var ignoreZoom = true,
pointer = this.getPointer(e, ignoreZoom),
activeObject = this._activeObject,
aObjects = this.getActiveObjects(),
activeTarget, activeTargetSubs,
isTouch = isTouchEvent(e),
shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1;
// first check current group (if one exists)
// active group does not check sub targets like normal groups.
// if active group just exits.
this.targets = [];
// if we hit the corner of an activeObject, let's return that.
if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) {
return activeObject;
}
if (aObjects.length > 1 && !skipGroup && activeObject === this._searchPossibleTargets([activeObject], pointer)) {
return activeObject;
}
if (aObjects.length === 1 &&
activeObject === this._searchPossibleTargets([activeObject], pointer)) {
if (!this.preserveObjectStacking) {
return activeObject;
}
else {
activeTarget = activeObject;
activeTargetSubs = this.targets;
this.targets = [];
}
}
var target = this._searchPossibleTargets(this._objects, pointer);
if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) {
target = activeTarget;
this.targets = activeTargetSubs;
}
return target;
},
/**
* Checks point is inside the object.
* @param {Object} [pointer] x,y object of point coordinates we want to check.
* @param {fabric.Object} obj Object to test against
* @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target.
* @return {Boolean} true if point is contained within an area of given object
* @private
*/
_checkTarget: function(pointer, obj, globalPointer) {
if (obj &&
obj.visible &&
obj.evented &&
// http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html
// http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html
obj.containsPoint(pointer)
) {
if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {
var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y);
if (!isTransparent) {
return true;
}
}
else {
return true;
}
}
},
/**
* Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted
* @param {Array} [objects] objects array to look into
* @param {Object} [pointer] x,y object of point coordinates we want to check.
* @return {fabric.Object} object that contains pointer
* @private
*/
_searchPossibleTargets: function(objects, pointer) {
// Cache all targets where their bounding box contains point.
var target, i = objects.length, subTarget;
// Do not check for currently grouped objects, since we check the parent group itself.
// until we call this function specifically to search inside the activeGroup
while (i--) {
var objToCheck = objects[i];
var pointerToUse = objToCheck.group ?
this._normalizePointer(objToCheck.group, pointer) : pointer;
if (this._checkTarget(pointerToUse, objToCheck, pointer)) {
target = objects[i];
if (target.subTargetCheck && target instanceof fabric.Group) {
subTarget = this._searchPossibleTargets(target._objects, pointer);
subTarget && this.targets.push(subTarget);
}
break;
}
}
return target;
},
/**
* Returns pointer coordinates without the effect of the viewport
* @param {Object} pointer with "x" and "y" number values
* @return {Object} object with "x" and "y" number values
*/
restorePointerVpt: function(pointer) {
return fabric.util.transformPoint(
pointer,
fabric.util.invertTransform(this.viewportTransform)
);
},
/**
* Returns pointer coordinates relative to canvas.
* Can return coordinates with or without viewportTransform.
* ignoreZoom false gives back coordinates that represent
* the point clicked on canvas element.
* ignoreZoom true gives back coordinates after being processed
* by the viewportTransform ( sort of coordinates of what is displayed
* on the canvas where you are clicking.
* ignoreZoom true = HTMLElement coordinates relative to top,left
* ignoreZoom false, default = fabric space coordinates, the same used for shape position
* To interact with your shapes top and left you want to use ignoreZoom true
* most of the time, while ignoreZoom false will give you coordinates
* compatible with the object.oCoords system.
* of the time.
* @param {Event} e
* @param {Boolean} ignoreZoom
* @return {Object} object with "x" and "y" number values
*/
getPointer: function (e, ignoreZoom) {
// return cached values if we are in the event processing chain
if (this._absolutePointer && !ignoreZoom) {
return this._absolutePointer;
}
if (this._pointer && ignoreZoom) {
return this._pointer;
}
var pointer = getPointer(e),
upperCanvasEl = this.upperCanvasEl,
bounds = upperCanvasEl.getBoundingClientRect(),
boundsWidth = bounds.width || 0,
boundsHeight = bounds.height || 0,
cssScale;
if (!boundsWidth || !boundsHeight ) {
if ('top' in bounds && 'bottom' in bounds) {
boundsHeight = Math.abs( bounds.top - bounds.bottom );
}
if ('right' in bounds && 'left' in bounds) {
boundsWidth = Math.abs( bounds.right - bounds.left );
}
}
this.calcOffset();
pointer.x = pointer.x - this._offset.left;
pointer.y = pointer.y - this._offset.top;
if (!ignoreZoom) {
pointer = this.restorePointerVpt(pointer);
}
var retinaScaling = this.getRetinaScaling();
if (retinaScaling !== 1) {
pointer.x /= retinaScaling;
pointer.y /= retinaScaling;
}
if (boundsWidth === 0 || boundsHeight === 0) {
// If bounds are not available (i.e. not visible), do not apply scale.
cssScale = { width: 1, height: 1 };
}
else {
cssScale = {
width: upperCanvasEl.width / boundsWidth,
height: upperCanvasEl.height / boundsHeight
};
}
return {
x: pointer.x * cssScale.width,
y: pointer.y * cssScale.height
};
},
/**
* @private
* @throws {CANVAS_INIT_ERROR} If canvas can not be initialized
*/
_createUpperCanvas: function () {
var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''),
lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl;
// there is no need to create a new upperCanvas element if we have already one.
if (upperCanvasEl) {
upperCanvasEl.className = '';
}
else {
upperCanvasEl = this._createCanvasElement();
this.upperCanvasEl = upperCanvasEl;
}
fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass);
this.wrapperEl.appendChild(upperCanvasEl);
this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl);
this._applyCanvasStyle(upperCanvasEl);
this.contextTop = upperCanvasEl.getContext('2d');
},
/**
* Returns context of top canvas where interactions are drawn
* @returns {CanvasRenderingContext2D}
*/
getTopContext: function () {
return this.contextTop;
},
/**
* @private
*/
_createCacheCanvas: function () {
this.cacheCanvasEl = this._createCanvasElement();
this.cacheCanvasEl.setAttribute('width', this.width);
this.cacheCanvasEl.setAttribute('height', this.height);
this.contextCache = this.cacheCanvasEl.getContext('2d');
},
/**
* @private
*/
_initWrapperElement: function () {
this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {
'class': this.containerClass
});
fabric.util.setStyle(this.wrapperEl, {
width: this.width + 'px',
height: this.height + 'px',
position: 'relative'
});
fabric.util.makeElementUnselectable(this.wrapperEl);
},
/**
* @private
* @param {HTMLElement} element canvas element to apply styles on
*/
_applyCanvasStyle: function (element) {
var width = this.width || element.width,
height = this.height || element.height;
fabric.util.setStyle(element, {
position: 'absolute',
width: width + 'px',
height: height + 'px',
left: 0,
top: 0,
'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none',
'-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none'
});
element.width = width;
element.height = height;
fabric.util.makeElementUnselectable(element);
},
/**
* Copy the entire inline style from one element (fromEl) to another (toEl)
* @private
* @param {Element} fromEl Element style is copied from
* @param {Element} toEl Element copied style is applied to
*/
_copyCanvasStyle: function (fromEl, toEl) {
toEl.style.cssText = fromEl.style.cssText;
},
/**
* Returns context of canvas where object selection is drawn
* @return {CanvasRenderingContext2D}
*/
getSelectionContext: function() {
return this.contextTop;
},
/**
* Returns <canvas> element on which object selection is drawn
* @return {HTMLCanvasElement}
*/
getSelectionElement: function () {
return this.upperCanvasEl;
},
/**
* Returns currently active object
* @return {fabric.Object} active object
*/
getActiveObject: function () {
return this._activeObject;
},
/**
* Returns an array with the current selected objects
* @return {fabric.Object} active object
*/
getActiveObjects: function () {
var active = this._activeObject;
if (active) {
if (active.type === 'activeSelection' && active._objects) {
return active._objects.slice(0);
}
else {
return [active];
}
}
return [];
},
/**
* @private
* @param {fabric.Object} obj Object that was removed
*/
_onObjectRemoved: function(obj) {
// removing active object should fire "selection:cleared" events
if (obj === this._activeObject) {
this.fire('before:selection:cleared', { target: obj });
this._discardActiveObject();
this.fire('selection:cleared', { target: obj });
obj.fire('deselected');
}
if (obj === this._hoveredTarget){
this._hoveredTarget = null;
this._hoveredTargets = [];
}
this.callSuper('_onObjectRemoved', obj);
},
/**
* @private
* Compares the old activeObject with the current one and fires correct events
* @param {fabric.Object} obj old activeObject
*/
_fireSelectionEvents: function(oldObjects, e) {
var somethingChanged = false, objects = this.getActiveObjects(),
added = [], removed = [];
oldObjects.forEach(function(oldObject) {
if (objects.indexOf(oldObject) === -1) {
somethingChanged = true;
oldObject.fire('deselected', {
e: e,
target: oldObject
});
removed.push(oldObject);
}
});
objects.forEach(function(object) {
if (oldObjects.indexOf(object) === -1) {
somethingChanged = true;
object.fire('selected', {
e: e,
target: object
});
added.push(object);
}
});
if (oldObjects.length > 0 && objects.length > 0) {
somethingChanged && this.fire('selection:updated', {
e: e,
selected: added,
deselected: removed,
});
}
else if (objects.length > 0) {
this.fire('selection:created', {
e: e,
selected: added,
});
}
else if (oldObjects.length > 0) {
this.fire('selection:cleared', {
e: e,
deselected: removed,
});
}
},
/**
* Sets given object as the only active object on canvas
* @param {fabric.Object} object Object to set as an active one
* @param {Event} [e] Event (passed along when firing "object:selected")
* @return {fabric.Canvas} thisArg
* @chainable
*/
setActiveObject: function (object, e) {
var currentActives = this.getActiveObjects();
this._setActiveObject(object, e);
this._fireSelectionEvents(currentActives, e);
return this;
},
/**
* This is a private method for now.
* This is supposed to be equivalent to setActiveObject but without firing
* any event. There is commitment to have this stay this way.
* This is the functional part of setActiveObject.
* @private
* @param {Object} object to set as active
* @param {Event} [e] Event (passed along when firing "object:selected")
* @return {Boolean} true if the selection happened
*/
_setActiveObject: function(object, e) {
if (this._activeObject === object) {
return false;
}
if (!this._discardActiveObject(e, object)) {
return false;
}
if (object.onSelect({ e: e })) {
return false;
}
this._activeObject = object;
return true;
},
/**
* This is a private method for now.
* This is supposed to be equivalent to discardActiveObject but without firing
* any events. There is commitment to have this stay this way.
* This is the functional part of discardActiveObject.
* @param {Event} [e] Event (passed along when firing "object:deselected")
* @param {Object} object to set as active
* @return {Boolean} true if the selection happened
* @private
*/
_discardActiveObject: function(e, object) {
var obj = this._activeObject;
if (obj) {
// onDeselect return TRUE to cancel selection;
if (obj.onDeselect({ e: e, object: object })) {
return false;
}
this._activeObject = null;
}
return true;
},
/**
* Discards currently active object and fire events. If the function is called by fabric
* as a consequence of a mouse event, the event is passed as a parameter and
* sent to the fire function for the custom events. When used as a method the
* e param does not have any application.
* @param {event} e
* @return {fabric.Canvas} thisArg
* @chainable
*/
discardActiveObject: function (e) {
var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject();
if (currentActives.length) {
this.fire('before:selection:cleared', { target: activeObject, e: e });
}
this._discardActiveObject(e);
this._fireSelectionEvents(currentActives, e);
return this;
},
/**
* Clears a canvas element and removes all event listeners
* @return {fabric.Canvas} thisArg
* @chainable
*/
dispose: function () {
var wrapper = this.wrapperEl;
this.removeListeners();
wrapper.removeChild(this.upperCanvasEl);
wrapper.removeChild(this.lowerCanvasEl);
this.contextCache = null;
this.contextTop = null;
['upperCanvasEl', 'cacheCanvasEl'].forEach((function(element) {
fabric.util.cleanUpJsdomNode(this[element]);
this[element] = undefined;
}).bind(this));
if (wrapper.parentNode) {
wrapper.parentNode.replaceChild(this.lowerCanvasEl, this.wrapperEl);
}
delete this.wrapperEl;
fabric.StaticCanvas.prototype.dispose.call(this);
return this;
},
/**
* Clears all contexts (background, main, top) of an instance
* @return {fabric.Canvas} thisArg
* @chainable
*/
clear: function () {
// this.discardActiveGroup();
this.discardActiveObject();
this.clearContext(this.contextTop);
return this.callSuper('clear');
},
/**
* Draws objects' controls (borders/controls)
* @param {CanvasRenderingContext2D} ctx Context to render controls on
*/
drawControls: function(ctx) {
var activeObject = this._activeObject;
if (activeObject) {
activeObject._renderControls(ctx);
}
},
/**
* @private
*/
_toObject: function(instance, methodName, propertiesToInclude) {
//If the object is part of the current selection group, it should
//be transformed appropriately
//i.e. it should be serialised as it would appear if the selection group
//were to be destroyed.
var originalProperties = this._realizeGroupTransformOnObject(instance),
object = this.callSuper('_toObject', instance, methodName, propertiesToInclude);
//Undo the damage we did by changing all of its properties
this._unwindGroupTransformOnObject(instance, originalProperties);
return object;
},
/**
* Realises an object's group transformation on it
* @private
* @param {fabric.Object} [instance] the object to transform (gets mutated)
* @returns the original values of instance which were changed
*/
_realizeGroupTransformOnObject: function(instance) {
if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) {
var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top'];
//Copy all the positionally relevant properties across now
var originalValues = {};
layoutProps.forEach(function(prop) {
originalValues[prop] = instance[prop];
});
fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix());
return originalValues;
}
else {
return null;
}
},
/**
* Restores the changed properties of instance
* @private
* @param {fabric.Object} [instance] the object to un-transform (gets mutated)
* @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject
*/
_unwindGroupTransformOnObject: function(instance, originalValues) {
if (originalValues) {
instance.set(originalValues);
}
},
/**
* @private
*/
_setSVGObject: function(markup, instance, reviver) {
//If the object is in a selection group, simulate what would happen to that
//object when the group is deselected
var originalProperties = this._realizeGroupTransformOnObject(instance);
this.callSuper('_setSVGObject', markup, instance, reviver);
this._unwindGroupTransformOnObject(instance, originalProperties);
},
setViewportTransform: function (vpt) {
if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) {
this._activeObject.clearContextTop();
}
fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt);
}
});
// copying static properties manually to work around Opera's bug,
// where "prototype" property is enumerable and overrides existing prototype
for (var prop in fabric.StaticCanvas) {
if (prop !== 'prototype') {
fabric.Canvas[prop] = fabric.StaticCanvas[prop];
}
}
})();