Skip to content

Commit

Permalink
death to chainables
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShaMan123
ShaMan123 committed Dec 5, 2022
1 parent 7c2021f commit a4dd0d6
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 80 deletions.
72 changes: 9 additions & 63 deletions src/static_canvas.class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,12 +376,9 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Calculates canvas element offset relative to the document
* This method is also attached as "resize" event handler of window
* @return {fabric.Canvas} instance
* @chainable
*/
calcOffset() {
this._offset = getElementOffset(this.lowerCanvasEl);
return this;
return (this._offset = getElementOffset(this.lowerCanvasEl));
}

/**
Expand Down Expand Up @@ -502,8 +499,6 @@ export class StaticCanvas extends createCollectionMixin(
* @param {Object} [options] Options object
* @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions
* @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions
* @return {fabric.Canvas} thisArg
* @chainable
*/
setDimensions(
dimensions: Partial<TSize>,
Expand Down Expand Up @@ -534,18 +529,14 @@ export class StaticCanvas extends createCollectionMixin(
if (!cssOnly) {
this.requestRenderAll();
}

return this;
}

/**
* Helper for setting width/height
* @private
* @param {String} prop property (width|height)
* @param {Number} value value to set property to
* @return {fabric.Canvas} instance
* @todo subclass in canvas and handle upperCanvasEl there.
* @chainable true
*/
_setBackstoreDimension(prop: keyof TSize, value: number) {
this.lowerCanvasEl[prop] = value;
Expand All @@ -559,18 +550,14 @@ export class StaticCanvas extends createCollectionMixin(
}

this[prop] = value;

return this;
}

/**
* Helper for setting css width/height
* @private
* @param {String} prop property (width|height)
* @param {String} value value to set property to
* @return {fabric.Canvas} instance
* @todo subclass in canvas and handle upperCanvasEl there.
* @chainable true
*/
_setCssDimension(prop: keyof TSize, value: string) {
this.lowerCanvasEl.style[prop] = value;
Expand All @@ -582,8 +569,6 @@ export class StaticCanvas extends createCollectionMixin(
if (this.wrapperEl) {
this.wrapperEl.style[prop] = value;
}

return this;
}

/**
Expand All @@ -597,8 +582,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Sets viewport transformation of this canvas instance
* @param {Array} vpt a Canvas 2D API transform matrix
* @return {fabric.Canvas} instance
* @chainable true
*/
setViewportTransform(vpt: TMat2D) {
const activeObject = this._activeObject,
Expand All @@ -622,7 +605,6 @@ export class StaticCanvas extends createCollectionMixin(
}
this.calcViewportBoundaries();
this.renderOnAddRemove && this.requestRenderAll();
return this;
}

/**
Expand All @@ -632,8 +614,6 @@ export class StaticCanvas extends createCollectionMixin(
* It has nothing to do with canvas center or visual center of the viewport.
* @param {Point} point to zoom with respect to
* @param {Number} value to set zoom to, less than 1 zooms out
* @return {fabric.Canvas} instance
* @chainable true
*/
zoomToPoint(point: Point, value: number) {
// TODO: just change the scale, preserve other transformations
Expand All @@ -645,17 +625,15 @@ export class StaticCanvas extends createCollectionMixin(
const after = transformPoint(newPoint, vpt);
vpt[4] += before.x - after.x;
vpt[5] += before.y - after.y;
return this.setViewportTransform(vpt);
this.setViewportTransform(vpt);
}

/**
* Sets zoom level of this canvas instance
* @param {Number} value to set zoom to, less than 1 zooms out
* @return {fabric.Canvas} instance
* @chainable true
*/
setZoom(value: number) {
return this.zoomToPoint(new Point(0, 0), value);
this.zoomToPoint(new Point(0, 0), value);
}

/**
Expand Down Expand Up @@ -693,12 +671,9 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Clears specified context of canvas element
* @param {CanvasRenderingContext2D} ctx Context to clear
* @return {fabric.Canvas} thisArg
* @chainable
*/
clearContext(ctx: CanvasRenderingContext2D): StaticCanvas {
clearContext(ctx: CanvasRenderingContext2D) {
ctx.clearRect(0, 0, this.width, this.height);
return this;
}

/**
Expand All @@ -711,10 +686,8 @@ export class StaticCanvas extends createCollectionMixin(

/**
* Clears all contexts (background, main, top) of an instance
* @return {fabric.Canvas} thisArg
* @chainable
*/
clear(): StaticCanvas {
clear() {
this.remove(...this.getObjects());
this.backgroundImage = null;
this.overlayImage = null;
Expand All @@ -723,21 +696,17 @@ export class StaticCanvas extends createCollectionMixin(
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
this.renderOnAddRemove && this.requestRenderAll();
return this;
}

/**
* Renders the canvas
* @return {fabric.Canvas} instance
* @chainable
*/
renderAll(): StaticCanvas {
renderAll() {
this.cancelRequestedRender();
if (this.destroyed) {
return this;
return;
}
this.renderCanvas(this.contextContainer, this._objects);
return this;
}

/**
Expand All @@ -747,8 +716,6 @@ export class StaticCanvas extends createCollectionMixin(
* animationFrame stacking on to of each other
* for an imperative rendering, use canvas.renderAll
* @private
* @return {fabric.Canvas} instance
* @chainable
*/
renderAndReset() {
this.nextRenderHandle = 0;
Expand All @@ -759,14 +726,11 @@ export class StaticCanvas extends createCollectionMixin(
* Append a renderAll request to next animation frame.
* unless one is already in progress, in that case nothing is done
* a boolean flag will avoid appending more.
* @return {fabric.Canvas} instance
* @chainable
*/
requestRenderAll(): StaticCanvas {
requestRenderAll() {
if (!this.nextRenderHandle && !this.disposed && !this.destroyed) {
this.nextRenderHandle = requestAnimFrame(this.renderAndResetBound);
}
return this;
}

/**
Expand Down Expand Up @@ -805,8 +769,6 @@ export class StaticCanvas extends createCollectionMixin(
* Renders background, objects, overlay and controls.
* @param {CanvasRenderingContext2D} ctx
* @param {Array} objects to render
* @return {fabric.Canvas} instance
* @chainable
*/
renderCanvas(ctx: CanvasRenderingContext2D, objects: FabricObject[]) {
if (this.destroyed) {
Expand Down Expand Up @@ -974,8 +936,6 @@ export class StaticCanvas extends createCollectionMixin(

/**
* Centers object horizontally in the canvas
* @param {FabricObject} object Object to center horizontally
* @return {fabric.Canvas} thisArg
*/
centerObjectH(object: FabricObject) {
return this._centerObject(
Expand All @@ -987,8 +947,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Centers object vertically in the canvas
* @param {FabricObject} object Object to center vertically
* @return {fabric.Canvas} thisArg
* @chainable
*/
centerObjectV(object: FabricObject) {
return this._centerObject(
Expand All @@ -1000,8 +958,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Centers object vertically and horizontally in the canvas
* @param {FabricObject} object Object to center vertically and horizontally
* @return {fabric.Canvas} thisArg
* @chainable
*/
centerObject(object: FabricObject) {
return this._centerObject(object, this.getCenterPoint());
Expand All @@ -1010,8 +966,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Centers object vertically and horizontally in the viewport
* @param {FabricObject} object Object to center vertically and horizontally
* @return {fabric.Canvas} thisArg
* @chainable
*/
viewportCenterObject(object: FabricObject) {
return this._centerObject(object, this.getVpCenter());
Expand All @@ -1020,8 +974,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Centers object horizontally in the viewport, object.top is unchanged
* @param {FabricObject} object Object to center vertically and horizontally
* @return {fabric.Canvas} thisArg
* @chainable
*/
viewportCenterObjectH(object: FabricObject) {
return this._centerObject(
Expand All @@ -1033,8 +985,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Centers object Vertically in the viewport, object.top is unchanged
* @param {FabricObject} object Object to center vertically and horizontally
* @return {fabric.Canvas} thisArg
* @chainable
*/
viewportCenterObjectV(object: FabricObject) {
return this._centerObject(
Expand All @@ -1046,7 +996,6 @@ export class StaticCanvas extends createCollectionMixin(
/**
* Calculate the point in canvas that correspond to the center of actual viewport.
* @return {Point} vpCenter, viewport center
* @chainable
*/
getVpCenter(): Point {
return transformPoint(
Expand All @@ -1059,14 +1008,11 @@ export class StaticCanvas extends createCollectionMixin(
* @private
* @param {FabricObject} object Object to center
* @param {Point} center Center point
* @return {fabric.Canvas} thisArg
* @chainable
*/
_centerObject(object: FabricObject, center: Point) {
object.setXY(center, 'center', 'center');
object.setCoords();
this.renderOnAddRemove && this.requestRenderAll();
return this;
}

/**
Expand Down Expand Up @@ -1787,7 +1733,7 @@ export class StaticCanvas extends createCollectionMixin(
* @return {String} string representation of an instance
*/
toString() {
return `#<fabric.Canvas (${this.complexity()}): { objects: ${
return `#<Canvas (${this.complexity()}): { objects: ${
this._objects.length
} }>`;
}
Expand Down
18 changes: 9 additions & 9 deletions test/unit/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@

QUnit.test('calcOffset', function(assert) {
assert.ok(typeof canvas.calcOffset === 'function', 'should respond to `calcOffset`');
assert.equal(canvas.calcOffset(), canvas, 'should be chainable');
assert.deepEqual(canvas.calcOffset(), { left: 0, top: 0 }, 'should retrun offset');
});

QUnit.test('add', function(assert) {
Expand Down Expand Up @@ -744,13 +744,13 @@

QUnit.test('clearContext', function(assert) {
assert.ok(typeof canvas.clearContext === 'function');
assert.equal(canvas.clearContext(canvas.getContext()), canvas, 'should be chainable');
canvas.clearContext(canvas.getContext());
});

QUnit.test('clear', function(assert) {
assert.ok(typeof canvas.clear === 'function');

assert.equal(canvas.clear(), canvas, 'should be chainable');
canvas.clear();
assert.equal(canvas.getObjects().length, 0);
});

Expand Down Expand Up @@ -1927,7 +1927,7 @@
makeRect({ left: 20, top: 20 })
]);

assert.equal(canvas.setActiveObject(group), canvas, 'should be chainable');
canvas.setActiveObject(group);
assert.equal(canvas.getActiveObject(), group);
});

Expand All @@ -1950,7 +1950,7 @@
QUnit.test('discardActiveObject on ActiveSelection', function(assert) {
var group = new fabric.ActiveSelection([makeRect(), makeRect()]);
canvas.setActiveObject(group);
assert.equal(canvas.discardActiveObject(), canvas, 'should be chainable');
canvas.discardActiveObject();
assert.equal(canvas.getActiveObject(), null, 'removing active group sets it to null');
});

Expand Down Expand Up @@ -2021,10 +2021,10 @@
QUnit.test('toString', function(assert) {
assert.ok(typeof canvas.toString === 'function');

assert.equal(canvas.toString(), '#<fabric.Canvas (0): { objects: 0 }>');
assert.equal(canvas.toString(), '#<Canvas (0): { objects: 0 }>');

canvas.add(makeRect());
assert.equal(canvas.toString(), '#<fabric.Canvas (1): { objects: 1 }>');
assert.equal(canvas.toString(), '#<Canvas (1): { objects: 1 }>');
});

QUnit.test('toSVG with active group', function(assert) {
Expand Down Expand Up @@ -2135,15 +2135,15 @@
QUnit.test('getSetWidth', function(assert) {
assert.ok(typeof canvas.getWidth === 'function');
assert.equal(canvas.getWidth(), 600);
assert.equal(canvas.setWidth(444), canvas, 'should be chainable');
canvas.setWidth(444);
assert.equal(canvas.getWidth(), 444);
assert.equal(canvas.lowerCanvasEl.style.width, 444 + 'px');
});

QUnit.test('getSetHeight', function(assert) {
assert.ok(typeof canvas.getHeight === 'function');
assert.equal(canvas.getHeight(), 600);
assert.equal(canvas.setHeight(765), canvas, 'should be chainable');
canvas.setHeight(765);
assert.equal(canvas.getHeight(), 765);
assert.equal(canvas.lowerCanvasEl.style.height, 765 + 'px');
});
Expand Down
Loading

0 comments on commit a4dd0d6

Please sign in to comment.