+ onMouseDown={onMouseDown}
+ style={{
+ position: 'absolute',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ ...styles,
+ }} />
)
+Rotator.defaultProps = {
+ classPrefix: 'tr',
+ styles: {}
+}
+
Rotator.propTypes = {
- onMouseDown:PropTypes.func.isRequired,
- classPrefix:PropTypes.string.isRequired
+ onMouseDown: PropTypes.func.isRequired,
+ classPrefix: PropTypes.string
}
export default Rotator
\ No newline at end of file
diff --git a/src/ScalePoint.js b/src/ScalePoint.js
index 3310133..b8223a8 100644
--- a/src/ScalePoint.js
+++ b/src/ScalePoint.js
@@ -1,15 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
-const ScalePoint = ({onMouseDown,classPrefix,position}) => (
+
+const POSITIONING = {
+ l: '0', r: '100%',
+ t: '0', b: '100%',
+ m: '50%',
+}
+
+const ScalePoint = ({ onMouseDown, classPrefix, position, styles }) => (
+ onMouseDown={onMouseDown}
+ style={{
+ position: 'absolute',
+ top: POSITIONING[position[0]],
+ left: POSITIONING[position[1]],
+ transform: 'translate(-50%, -50%)',
+ ...styles
+ }} />
)
+ScalePoint.defaultProps = {
+ classPrefix: 'tr',
+ styles: {},
+}
+
ScalePoint.propTypes = {
- onMouseDown:PropTypes.func.isRequired,
- classPrefix:PropTypes.string.isRequired,
- position:PropTypes.string.isRequired,
+ onMouseDown: PropTypes.func.isRequired,
+ classPrefix: PropTypes.string,
+ position: PropTypes.string.isRequired,
+ styles: PropTypes.object.isRequired,
}
export default ScalePoint
\ No newline at end of file
diff --git a/src/Transform.js b/src/Transform.js
index 3840fe5..89ac277 100644
--- a/src/Transform.js
+++ b/src/Transform.js
@@ -4,6 +4,12 @@ import ScalePoint from './ScalePoint'
import Rotator from './Rotator'
import {scale, rotate, translate, styler} from 'free-transform'
+const SCALE_HANDLE_PRESETS = {
+ 'corners': ['tl', 'tr', 'bl', 'br'],
+ 'sides': ['tm', 'mr', 'bm', 'ml'],
+ 'all': ['tl', 'ml', 'tr', 'tm', 'mr', 'bl', 'bm', 'br'],
+}
+
export default class Transform extends React.Component {
constructor(props) {
@@ -15,7 +21,25 @@ export default class Transform extends React.Component {
render() {
- const {children, classPrefix, x, y, scaleX, scaleY, width, height, angle, disableScale} = this.props
+ const {
+ children, classPrefix,
+ x, y, scaleX, scaleY,
+ width, height, angle,
+ disableScale,
+ rotateEnabled,
+ scaleEnabled,
+ translateEnabled,
+ scaleHandles,
+ open, //...props
+ } = this.props
+
+ // replace anchor shortcuts
+ for(var name in SCALE_HANDLE_PRESETS) {
+ var index = scaleHandles.indexOf(name);
+ if (index !== -1) {
+ scaleHandles.splice(index, 1, ...SCALE_HANDLE_PRESETS[name]);
+ }
+ }
const {
element: elementStyle,
@@ -23,21 +47,25 @@ export default class Transform extends React.Component {
} = styler({x, y, scaleX, scaleY, width, height, angle, disableScale});
return (
-
+
+
{children}
-
- this.handleScale('tl', event)} classPrefix={classPrefix}/>
- this.handleScale('ml', event)} classPrefix={classPrefix}/>
- this.handleScale('tr', event)} classPrefix={classPrefix}/>
- this.handleScale('tm', event)} classPrefix={classPrefix}/>
- this.handleScale('mr', event)} classPrefix={classPrefix}/>
- this.handleScale('bl', event)} classPrefix={classPrefix}/>
- this.handleScale('bm', event)} classPrefix={classPrefix}/>
- this.handleScale('br', event)} classPrefix={classPrefix}/>
-
-
+
+ {open &&
+
+ {scaleEnabled && scaleHandles.map(position =>
+ this.handleScale(position, event)} />
+ )}
+
+ {rotateEnabled && }
+
}
)
}
@@ -50,15 +78,23 @@ export default class Transform extends React.Component {
y: this.props.y,
startX: event.pageX,
startY: event.pageY
- }, this.props.onUpdate);
+ }, this.props.onTranslate || this.props.onUpdate);
- const up = () => {
+ const up = (event) => {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', up);
+
+ let onEnd = this.props.onTranslateEnd || this.props.onTransformEnd;
+ if(onEnd)
+ onEnd(event);
};
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', up);
+
+ let onStart = this.props.onTranslateStart || this.props.onTransformStart;
+ if(onStart)
+ onStart(event);
}
handleScale(scaleType, event) {
@@ -68,8 +104,7 @@ export default class Transform extends React.Component {
event.preventDefault();
const drag = scale(scaleType, {
- startX: event.pageX,
- startY: event.pageY,
+ event,
x: this.props.x,
y: this.props.y,
scaleX: this.props.scaleX,
@@ -78,17 +113,25 @@ export default class Transform extends React.Component {
height: this.props.height,
angle: this.props.angle,
scaleLimit: this.props.scaleLimit,
- scaleFromCenter: event.altKey,
- aspectRatio: event.shiftKey,
- }, this.props.onUpdate);
+ scaleFromCenter: this.props.scaleFromCenter,
+ aspectRatio: this.props.aspectRatio,
+ }, this.props.onScale || this.props.onUpdate);
- const up = () => {
+ const up = (event) => {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', up);
+
+ let onEnd = this.props.onScaleEnd || this.props.onTransformEnd;
+ if(onEnd)
+ onEnd(event);
};
- document.addEventListener("mousemove", drag)
- document.addEventListener("mouseup", up)
+ document.addEventListener("mousemove", drag);
+ document.addEventListener("mouseup", up);
+
+ let onStart = this.props.onScaleStart || this.props.onTransformStart;
+ if(onStart)
+ onStart(event);
}
handleRotation(event) {
@@ -106,29 +149,45 @@ export default class Transform extends React.Component {
angle: this.props.angle,
offsetX: this.props.offsetX,
offsetY: this.props.offsetY
- }, this.props.onUpdate);
+ }, this.props.onRotate || this.props.onUpdate);
- const up = () => {
+ const up = (event) => {
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', up);
+
+ let onEnd = this.props.onRotateEnd || this.props.onTransformEnd;
+ if(onEnd)
+ onEnd(event);
};
- document.addEventListener("mousemove", drag)
- document.addEventListener("mouseup", up)
+ document.addEventListener("mousemove", drag);
+ document.addEventListener("mouseup", up);
+ let onStart = this.props.onRotateStart || this.props.onTransformStart;
+ if(onStart)
+ onStart(event);
}
}
+Transform.SCALE_HANDLE_PRESETS = SCALE_HANDLE_PRESETS;
Transform.defaultProps = {
classPrefix: "tr",
scaleLimit: 0.1,
disableScale: false,
+ scaleX: 1,
+ scaleY: 1,
+ angle: 0,
offsetX: 0,
offsetY: 0,
- onUpdate: function () {
-
- }
+ onUpdate: function () {},
+ rotateEnabled: true,
+ scaleEnabled: true,
+ translateEnabled: true,
+ scaleHandles: SCALE_HANDLE_PRESETS['all'],
+ open: true,
+ scaleFromCenter: false,
+ aspectRatio: false,
}
Transform.propTypes = {
@@ -141,9 +200,35 @@ Transform.propTypes = {
scaleY: PropTypes.number.isRequired,
scaleLimit: PropTypes.number.isRequired,
angle: PropTypes.number.isRequired,
+
onUpdate: PropTypes.func,
+ onTransformStart: PropTypes.func,
+ onTransformEnd: PropTypes.func,
+
+ onTranslate: PropTypes.func,
+ onRotate: PropTypes.func,
+ onScale: PropTypes.func,
+
+ onTranslateStart: PropTypes.func,
+ onRotateStart: PropTypes.func,
+ onScaleStart: PropTypes.func,
+
+ onTranslateEnd: PropTypes.func,
+ onRotateEnd: PropTypes.func,
+ onScaleEnd: PropTypes.func,
+
children: PropTypes.element,
disableScale: PropTypes.bool,
offsetX: PropTypes.number.isRequired,
offsetY: PropTypes.number.isRequired,
+
+ rotateEnabled: PropTypes.bool,
+ scaleEnabled: PropTypes.bool,
+ translateEnabled: PropTypes.bool,
+
+ scaleHandles: PropTypes.array,
+ scaleFromCenter: PropTypes.bool,
+ aspectRatio: PropTypes.oneOfType([ PropTypes.bool, PropTypes.number ]),
+
+ open: PropTypes.bool,
}