Skip to content

Commit

Permalink
numeric origin (#3121)
Browse files Browse the repository at this point in the history 
* Numeric object origin add tets
  • Loading branch information
@asturur
asturur authored Jul 25, 2016
1 parent 9980c83 commit 9e5f3ab
Show file tree
Hide file tree
Showing 7 changed files with 515 additions and 46 deletions.
83 changes: 69 additions & 14 deletions dist/fabric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3890,7 +3890,6 @@ if (typeof console !== 'undefined') {
}
rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g);
rules = rules.map(function(rule) { return rule.trim(); });

rules.forEach(function(rule) {

var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/),
Expand All @@ -3909,7 +3908,12 @@ if (typeof console !== 'undefined') {
if (_rule === '') {
return;
}
allRules[_rule] = fabric.util.object.clone(ruleObj);
if (allRules[_rule]) {
fabric.util.object.extend(allRules[_rule], ruleObj);
}
else {
allRules[_rule] = fabric.util.object.clone(ruleObj);
}
});
});
}
Expand Down Expand Up @@ -9128,7 +9132,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
}
else if (t.originX === 'center') {
localMouse.x *= t.mouseXSign * 2;

if (localMouse.x < 0) {
t.mouseXSign = -t.mouseXSign;
}
Expand All @@ -9139,7 +9142,6 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
}
else if (t.originY === 'center') {
localMouse.y *= t.mouseYSign * 2;

if (localMouse.y < 0) {
t.mouseYSign = -t.mouseYSign;
}
Expand Down Expand Up @@ -10035,6 +10037,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fab
}

this._handleCursorAndEvent(e, target, 'up');
target && (target.__corner = 0);
shouldRender && this.renderAll();
},

Expand Down Expand Up @@ -12869,14 +12872,46 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x,
y = point.y,
offsetX = originXOffset[toOriginX] - originXOffset[fromOriginX],
offsetY = originYOffset[toOriginY] - originYOffset[fromOriginY],
dim;
offsetX, offsetY;

if (typeof fromOriginX === 'string') {
fromOriginX = originXOffset[fromOriginX];
}
else {
fromOriginX -= 0.5;
}

if (typeof toOriginX === 'string') {
toOriginX = originXOffset[toOriginX];
}
else {
toOriginX -= 0.5;
}

offsetX = toOriginX - fromOriginX;

if (typeof fromOriginY === 'string') {
fromOriginY = originYOffset[fromOriginY];
}
else {
fromOriginY -= 0.5;
}

if (typeof toOriginY === 'string') {
toOriginY = originYOffset[toOriginY];
}
else {
toOriginY -= 0.5;
}

offsetY = toOriginY - fromOriginY;

if (offsetX || offsetY) {
dim = this._getTransformedDimensions();
x = point.x + offsetX * dim.x;
y = point.y + offsetY * dim.y;
}

return new fabric.Point(x, y);
},

Expand Down Expand Up @@ -12950,7 +12985,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
var center = this.getCenterPoint(),
p, p2;

if (originX && originY) {
if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) {
p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
}
else {
Expand Down Expand Up @@ -12995,12 +13030,24 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
var angle = degreesToRadians(this.angle),
hypotFull = this.getWidth(),
xFull = Math.cos(angle) * hypotFull,
yFull = Math.sin(angle) * hypotFull;
yFull = Math.sin(angle) * hypotFull,
offsetFrom, offsetTo;

//TODO: this function does not consider mixed situation like top, center.
this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);

if (typeof this.originX === 'string') {
offsetFrom = originXOffset[this.originX];
}
else {
offsetFrom = this.originX - 0.5;
}
if (typeof to === 'string') {
offsetTo = originXOffset[to]
}
else {
offsetTo = to - 0.5;
}
this.left += xFull * (offsetTo - offsetFrom);
this.top += yFull * (offsetTo - offsetFrom);
this.setCoords();
this.originX = to;
},
Expand Down Expand Up @@ -15572,7 +15619,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
parsedAttributes.left = parsedAttributes.left || 0;
parsedAttributes.top = parsedAttributes.top || 0;
var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
rect.visible = rect.width > 0 && rect.height > 0;
rect.visible = rect.visible && rect.width > 0 && rect.height > 0;
return rect;
};
/* _FROM_SVG_END_ */
Expand Down Expand Up @@ -16146,7 +16193,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @private
* @param {CanvasRenderingContext2D} ctx context to render path on
*/
_render: function(ctx) {
_renderPathCommands: function(ctx) {
var current, // current instruction
previous = null,
subpathStartX = 0,
Expand Down Expand Up @@ -16451,6 +16498,14 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
}
previous = current;
}
},

/**
* @private
* @param {CanvasRenderingContext2D} ctx context to render path on
*/
_render: function(ctx) {
this._renderPathCommands(ctx);
this._renderFill(ctx);
this._renderStroke(ctx);
},
Expand Down
14 changes: 7 additions & 7 deletions dist/fabric.min.js
View file

Large diffs are not rendered by default.

Binary file modified dist/fabric.min.js.gz
View file
Binary file not shown.
56 changes: 48 additions & 8 deletions dist/fabric.require.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2129,7 +2129,11 @@ if (typeof console !== "undefined") {
if (_rule === "") {
return;
}
allRules[_rule] = fabric.util.object.clone(ruleObj);
if (allRules[_rule]) {
fabric.util.object.extend(allRules[_rule], ruleObj);
} else {
allRules[_rule] = fabric.util.object.clone(ruleObj);
}
});
});
}
Expand Down Expand Up @@ -5071,6 +5075,7 @@ fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, {
target.isMoving = false;
}
this._handleCursorAndEvent(e, target, "up");
target && (target.__corner = 0);
shouldRender && this.renderAll();
},
_handleCursorAndEvent: function(e, target, eventType) {
Expand Down Expand Up @@ -6220,7 +6225,29 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
};
fabric.util.object.extend(fabric.Object.prototype, {
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x, y = point.y, offsetX = originXOffset[toOriginX] - originXOffset[fromOriginX], offsetY = originYOffset[toOriginY] - originYOffset[fromOriginY], dim;
var x = point.x, y = point.y, offsetX, offsetY;
if (typeof fromOriginX === "string") {
fromOriginX = originXOffset[fromOriginX];
} else {
fromOriginX -= .5;
}
if (typeof toOriginX === "string") {
toOriginX = originXOffset[toOriginX];
} else {
toOriginX -= .5;
}
offsetX = toOriginX - fromOriginX;
if (typeof fromOriginY === "string") {
fromOriginY = originYOffset[fromOriginY];
} else {
fromOriginY -= .5;
}
if (typeof toOriginY === "string") {
toOriginY = originYOffset[toOriginY];
} else {
toOriginY -= .5;
}
offsetY = toOriginY - fromOriginY;
if (offsetX || offsetY) {
dim = this._getTransformedDimensions();
x = point.x + offsetX * dim.x;
Expand Down Expand Up @@ -6252,7 +6279,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
},
toLocalPoint: function(point, originX, originY) {
var center = this.getCenterPoint(), p, p2;
if (originX && originY) {
if (typeof originX !== "undefined" && typeof originY !== "undefined") {
p = this.translateToGivenOrigin(center, "center", "center", originX, originY);
} else {
p = new fabric.Point(this.left, this.top);
Expand All @@ -6269,9 +6296,19 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
this.set("top", position.y);
},
adjustPosition: function(to) {
var angle = degreesToRadians(this.angle), hypotFull = this.getWidth(), xFull = Math.cos(angle) * hypotFull, yFull = Math.sin(angle) * hypotFull;
this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);
var angle = degreesToRadians(this.angle), hypotFull = this.getWidth(), xFull = Math.cos(angle) * hypotFull, yFull = Math.sin(angle) * hypotFull, offsetFrom, offsetTo;
if (typeof this.originX === "string") {
offsetFrom = originXOffset[this.originX];
} else {
offsetFrom = this.originX - .5;
}
if (typeof to === "string") {
offsetTo = originXOffset[to];
} else {
offsetTo = to - .5;
}
this.left += xFull * (offsetTo - offsetFrom);
this.top += yFull * (offsetTo - offsetFrom);
this.setCoords();
this.originX = to;
},
Expand Down Expand Up @@ -7402,7 +7439,7 @@ fabric.util.object.extend(fabric.Object.prototype, {
parsedAttributes.left = parsedAttributes.left || 0;
parsedAttributes.top = parsedAttributes.top || 0;
var rect = new fabric.Rect(extend(options ? fabric.util.object.clone(options) : {}, parsedAttributes));
rect.visible = rect.width > 0 && rect.height > 0;
rect.visible = rect.visible && rect.width > 0 && rect.height > 0;
return rect;
};
fabric.Rect.fromObject = function(object) {
Expand Down Expand Up @@ -7626,7 +7663,7 @@ fabric.util.object.extend(fabric.Object.prototype, {
y: this.minY + this.height / 2
};
},
_render: function(ctx) {
_renderPathCommands: function(ctx) {
var current, previous = null, subpathStartX = 0, subpathStartY = 0, x = 0, y = 0, controlX = 0, controlY = 0, tempX, tempY, l = -this.pathOffset.x, t = -this.pathOffset.y;
if (this.group && this.group.type === "path-group") {
l = 0;
Expand Down Expand Up @@ -7807,6 +7844,9 @@ fabric.util.object.extend(fabric.Object.prototype, {
}
previous = current;
}
},
_render: function(ctx) {
this._renderPathCommands(ctx);
this._renderFill(ctx);
this._renderStroke(ctx);
},
Expand Down
2 changes: 0 additions & 2 deletions src/canvas.class.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -785,7 +785,6 @@
}
else if (t.originX === 'center') {
localMouse.x *= t.mouseXSign * 2;

if (localMouse.x < 0) {
t.mouseXSign = -t.mouseXSign;
}
Expand All @@ -796,7 +795,6 @@
}
else if (t.originY === 'center') {
localMouse.y *= t.mouseYSign * 2;

if (localMouse.y < 0) {
t.mouseYSign = -t.mouseYSign;
}
Expand Down
60 changes: 52 additions & 8 deletions src/mixins/object_origin.mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,46 @@
translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) {
var x = point.x,
y = point.y,
offsetX = originXOffset[toOriginX] - originXOffset[fromOriginX],
offsetY = originYOffset[toOriginY] - originYOffset[fromOriginY],
dim;
offsetX, offsetY, dim;

if (typeof fromOriginX === 'string') {
fromOriginX = originXOffset[fromOriginX];
}
else {
fromOriginX -= 0.5;
}

if (typeof toOriginX === 'string') {
toOriginX = originXOffset[toOriginX];
}
else {
toOriginX -= 0.5;
}

offsetX = toOriginX - fromOriginX;

if (typeof fromOriginY === 'string') {
fromOriginY = originYOffset[fromOriginY];
}
else {
fromOriginY -= 0.5;
}

if (typeof toOriginY === 'string') {
toOriginY = originYOffset[toOriginY];
}
else {
toOriginY -= 0.5;
}

offsetY = toOriginY - fromOriginY;

if (offsetX || offsetY) {
dim = this._getTransformedDimensions();
x = point.x + offsetX * dim.x;
y = point.y + offsetY * dim.y;
}

return new fabric.Point(x, y);
},

Expand Down Expand Up @@ -107,7 +139,7 @@
var center = this.getCenterPoint(),
p, p2;

if (originX && originY) {
if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) {
p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY);
}
else {
Expand Down Expand Up @@ -152,12 +184,24 @@
var angle = degreesToRadians(this.angle),
hypotFull = this.getWidth(),
xFull = Math.cos(angle) * hypotFull,
yFull = Math.sin(angle) * hypotFull;
yFull = Math.sin(angle) * hypotFull,
offsetFrom, offsetTo;

//TODO: this function does not consider mixed situation like top, center.
this.left += xFull * (originXOffset[to] - originXOffset[this.originX]);
this.top += yFull * (originXOffset[to] - originXOffset[this.originX]);

if (typeof this.originX === 'string') {
offsetFrom = originXOffset[this.originX];
}
else {
offsetFrom = this.originX - 0.5;
}
if (typeof to === 'string') {
offsetTo = originXOffset[to];
}
else {
offsetTo = to - 0.5;
}
this.left += xFull * (offsetTo - offsetFrom);
this.top += yFull * (offsetTo - offsetFrom);
this.setCoords();
this.originX = to;
},
Expand Down
Loading

0 comments on commit 9e5f3ab

Please sign in to comment.