Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Minor refactoring, changed showBBoxHandles to bboxDrag, updated README

  • Loading branch information...
commit 8667436a2194f8f9b2d9b593e9b25897e6cefb17 1 parent d07fd1f
@AliasIO authored
Showing with 52 additions and 45 deletions.
  1. +8 −4 README.md
  2. +44 −41 raphael.free_transform.js
View
12 README.md
@@ -63,6 +63,10 @@ Options
Sets the attributes of the handles (default: `{ fill: '#000', stroke: '#000' }`).
+`bboxScale: true|false`
+
+Enables resizing by dragging handles at the corners of the object's bounding box (if `showBBox` is set to `true`) (default: `false`).
+
`boundary: { x: int, y: int, width: int, height: int }|false`
Limits the drag area of the handles (default: dimensions of the paper).
@@ -123,13 +127,13 @@ Scale with n pixel increments (default: `false`).
Limit the minimum and maximum size of the object in pixels (default: `false`)
-`size: num`
+`showBBox: true|false`
-Sets the radius of the handles in pixels (default: `5`).
+Show the bounding box (default: `false`)
-`showBBoxHandles: true|false`
+`size: num`
-Enables/disables resize drag handles at the corners of the object's bounding box (default: `false`).
+Sets the radius of the handles in pixels (default: `5`).
Callback
--------
View
85 raphael.free_transform.js
@@ -49,6 +49,7 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
opts: {
animate: false,
attrs: { fill: '#000', stroke: '#000' },
+ bboxScale: false,
boundary: { x: paper._left ? paper._left : 0, y: paper._top ? paper._top : 0, width: paper.width, height: paper.height },
delay: 700,
distance: 1.2,
@@ -67,7 +68,6 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
scaleSnap: false,
scaleRange: false,
showBBox: false,
- showBBoxHandles: false,
size: 5
},
subject: subject
@@ -192,21 +192,19 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
.attr(ft.opts.attrs)
;
});
+ }
- if ( ft.opts.showBBox && ft.opts.showBBoxHandles ) {
- if ( ft.opts.scale ) {
- ft.handles.bbox = new Array;
+ if ( ft.opts.showBBox && ft.opts.bboxScale ) {
+ ft.handles.bbox = new Array;
- [ 0, 1, 2, 3 ].map(function(corner) {
- ft.handles.bbox[corner] = new Object;
+ [ 0, 1, 2, 3 ].map(function(corner) {
+ ft.handles.bbox[corner] = new Object;
- ft.handles.bbox[corner].disc = paper
- .circle(ft.attrs.center.x, ft.attrs.center.y, ft.opts.size)
- .attr(ft.opts.attrs)
- ;
- });
- }
- }
+ ft.handles.bbox[corner].disc = paper
+ .circle(ft.attrs.center.x, ft.attrs.center.y, ft.opts.size)
+ .attr(ft.opts.attrs)
+ ;
+ });
}
if ( ft.opts.drag ) {
@@ -310,7 +308,7 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
dy *= ft.o.viewBoxRatio.y;
}
- if ( ft.opts.keepRatio ) dx = dy * ft.o.rotation.x * ft.o.rotation.y * ft.o.rotation.r;
+ if ( ft.opts.keepRatio ) dx = dy * ft.o.rotate.x * ft.o.rotate.y * ft.o.rotate.r;
if ( ft.opts.drag ) {
ft.attrs.translate = {

Element can be moved here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@@ -319,13 +317,14 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
};
}
- if ( ft.opts.scale ) {
+ if ( ft.opts.bboxScale ) {
var
- rdx = dx * ft.o.rotation.cos - dy * ft.o.rotation.sin,
- rdy = dx * ft.o.rotation.sin + dy * ft.o.rotation.cos;
+ rdx = dx * ft.o.rotate.cos - dy * ft.o.rotate.sin,
+ rdy = dx * ft.o.rotate.sin + dy * ft.o.rotate.cos;
+
ft.attrs.scale = {
- x: ft.o.scale.x + rdx * ft.o.rotation.x / ft.o.size.x,
- y: ft.o.scale.y + rdy * ft.o.rotation.y / ft.o.size.y
+ x: ft.o.scale.x + rdx * ft.o.rotate.x / ft.o.size.x,
+ y: ft.o.scale.y + rdy * ft.o.rotate.y / ft.o.size.y
};
}
@@ -333,38 +332,42 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
ft.apply();
- asyncCallback([ ft.opts.drag ? 'drag' : null, ft.opts.scale ? 'scale' : null ]);
+ asyncCallback([ 'scale' ]);
}, function() {
var
- elementRotation = ft.attrs.rotate / 180 * Math.PI;
- handleAngle = Math.atan2(
- this.attrs.cy - ft.attrs.center.y - ft.attrs.translate.y,
- this.attrs.cx - ft.attrs.center.x - ft.attrs.translate.x);
- // Copy original state
+ rotate = ft.attrs.rotate / 180 * Math.PI,
+ rad = Math.atan2(
+ ft.attrs.cy - ft.attrs.center.y - ft.attrs.translate.y,
+ ft.attrs.cx - ft.attrs.center.x - ft.attrs.translate.x
+ );
+
+ // Offset values
ft.o = cloneObj(ft.attrs);
+
// Pre-compute rotation sin & cos for efficiency
// and record handle x/y direction
- ft.o.rotation = {
- sin: Math.sin(elementRotation),
- cos: Math.cos(elementRotation),
- x: Math.cos(handleAngle + elementRotation) < 0 ? -1 : 1,
- y: Math.sin(handleAngle + elementRotation) < 0 ? -1 : 1,
- r: Math.sin(elementRotation) * Math.cos(elementRotation) < 0 ? -1 : 1
+ ft.o.rotate = {
+ sin: Math.sin(rotate),
+ cos: Math.cos(rotate),
+ x: Math.cos(rad + rotate) < 0 ? -1 : 1,
+ y: Math.sin(rad + rotate) < 0 ? -1 : 1,
+ r: Math.sin(rotate) * Math.cos(rotate) < 0 ? -1 : 1
};
- // Account for negative scale:
- if ( ft.o.scale.x < 0 ) ft.o.rotation.x *= -1;
- if ( ft.o.scale.y < 0 ) ft.o.rotation.y *= -1;
+
+ // Account for negative scale (mirrored)
+ if ( ft.o.scale.x < 0 ) ft.o.rotate.x *= -1;
+ if ( ft.o.scale.y < 0 ) ft.o.rotate.y *= -1;
if ( paper._viewBox ) {
ft.o.viewBoxRatio = {
x: paper._viewBox[2] / paper.width,
y: paper._viewBox[3] / paper.height
- };
+ };
}
- asyncCallback([ ft.opts.drag ? 'drag start' : null, ft.opts.scale ? 'scale start' : null ]);

That's why I included the drag event type here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ asyncCallback([ 'scale start' ]);
}, function() {
- asyncCallback([ ft.opts.drag ? 'drag end' : null, ft.opts.scale ? 'scale end' : null ]);
+ asyncCallback([ 'scale end' ]);
});
});
}
@@ -587,10 +590,10 @@ Raphael.fn.freeTransform = function(subject, options, callback) {
);
} else {
item.el.transform([
- 'R', rotate, center.x, center.y,
- 'S', scale.x, scale.y, center.x, center.y,
- 'T', translate.x, translate.y
- ] + ft.items[i].transformString);
+ 'R', rotate, center.x, center.y,
+ 'S', scale.x, scale.y, center.x, center.y,
+ 'T', translate.x, translate.y
+ ] + ft.items[i].transformString);
asyncCallback([ 'apply' ]);

3 comments on commit 8667436

@paulegan

Note that dragging the bbox handles will move/translate the element if ft.opts.drag is enabled.

@AliasIO
Owner

Although you're technically correct (the best kind of correct) I think scaling should be decoupled from dragging. So dragging the bbox corners should always behave like it does when dragging is enabled. Although the translation does get updated it doesn't feel like I'm "dragging" the object when resizing. Thoughts?

Also, at the moment scaling with dragging disabled seems off by 50% (the corner doesn't stay under the mouse as I'd expect).

Have you noticed scaling a rotated object (~45 degrees) doesn't work well either? I haven't been able to work out what's going wrong here.

@paulegan

Fair enough regarding "drag" events. I just worried that some users might be surprised that attrs.translate might have changed on a "scale" event.

Just pushed some new changes: paulegan@bd5c6edc587519e91e865e834bd4e18c758ef212. Fixed the rotation and "keepRatio" issues. The logic is a bit more complicated now so I added some extra explanatory comments.

Please sign in to comment.
Something went wrong with that request. Please try again.