Added more configurable options

README.md

@@ -31,9 +31,29 @@ import FreeTransform from 'react-free-transform'
     scaleX={1}
     scaleY={1}
     angle={0}
-    onUpdate={({x, y, scaleX, scaleY}) => {}}
     classPrefix="tr"
-    disableScale={false}
+    disableScale={false} // scale the content or just the content area
+    rotateEnabled={true} // add/remove the rotation handle
+    translateEnabled={true} // add/remove dragging
+    scaleEnabled={true} // add/remove scaling handles
+    scaleHandles={['corners', 'sides']} // equivalent to ['tl', 'ml', 'tr', 'tm', 'mr', 'bl', 'bm', 'br']
+    open={true} // enable/disable the transformer easily
+    // general events
+    onUpdate={({x, y, scaleX, scaleY}) => {}}
+    onTransformStart={(event) => {}}
+    onTransformEnd={(event) => {}}
+    // fallback to onUpdate
+    onTranslate={({x, y, scaleX, scaleY}) => {}}
+    onRotate={({x, y, scaleX, scaleY}) => {}}
+    onScale={({x, y, scaleX, scaleY}) => {}}
+    // fallback to onTransformStart
+    onTranslateStart={(event) => {}}
+    onRotateStart={(event) => {}}
+    onScaleStart={(event) => {}}
+    // fallback to onTransformEnd
+    onTranslateEnd={(event) => {}}
+    onRotateEnd={(event) => {}}
+    onScaleEnd={(event) => {}}
  >
     <img src="..."/>
  </FreeTransform>
@@ -67,49 +87,6 @@ import FreeTransform from 'react-free-transform'
 .tr-transform__scale-point:active{
     background: #DAE1E7;
 }
-.tr-transform__scale-point {
-
-}
-
-.tr-transform__scale-point--tl {
-    top: -7px;
-    left: -7px;
-}
-
-.tr-transform__scale-point--ml {
-    top: calc(50% - 7px);
-    left: -7px;
-}
-
-.tr-transform__scale-point--tr {
-    left: calc(100% - 7px);
-    top: -7px;
-}
-
-.tr-transform__scale-point--tm {
-    left: calc(50% - 7px);
-    top: -7px;
-}
-
-.tr-transform__scale-point--mr {
-    left: calc(100% - 7px);
-    top: calc(50% - 7px);
-}
-
-.tr-transform__scale-point--bl {
-    left: -7px;
-    top: calc(100% - 7px);
-}
-
-.tr-transform__scale-point--bm {
-    left: calc(50% - 7px);
-    top: calc(100% - 7px);
-}
-
-.tr-transform__scale-point--br {
-    left: calc(100% - 7px);
-    top: calc(100% - 7px);
-}
 ```
 
 

__tests__/Transform.test.js

@@ -5,19 +5,23 @@ import Enzyme,{mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 Enzyme.configure({ adapter: new Adapter() });
 
+const testProps = {
+  classPrefix: 'tr',
+  width: 100,
+  height: 100, 
+  x: 0,
+  y: 0,
+  scaleX: 1,
+  scaleY: 0,
+  scaleLimit: 0.1,
+  angle: 0
+}
+
 it('renders without crashing', () => {
   const div = document.createElement('div');
   const element = <Transform
-    classPrefix="tr"
-    width={100}
-    height={100}
-    x={0}
-    y={0}
-    scaleX={1}
-    scaleY={0}
-    scaleLimit={0.1}
-    angle={0}
-    onUpdate={() => {}}
+    {...testProps}
+    onUpdate={({x, y, scaleX, scaleY}) => {}}
   >
     <div/>
   </Transform>;
@@ -36,37 +40,199 @@ it('renders without crashing', () => {
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));
 
+  Transform.SCALE_HANDLE_PRESETS['all'].forEach((position) => {
+    wrapper.find(`.tr-transform__scale-point--${position}`).simulate('mousedown');
+    global.document.dispatchEvent(new Event('mousemove'));
+    global.document.dispatchEvent(new Event('mouseup'));
+  })
 
-  wrapper.find('.tr-transform__scale-point--tl').simulate('mousedown');
-  global.document.dispatchEvent(new Event('mousemove'));
-  global.document.dispatchEvent(new Event('mouseup'));
+});
 
+it('renders with basic events without crashing', () => {
+  const div = document.createElement('div');
+  const element = <Transform
+    {...testProps}
+    onUpdate={({x, y, scaleX, scaleY}) => {}}
+    onTransformStart={(event) => {}}
+    onTransformEnd={(event) => {}}
+  >
+    <div/>
+  </Transform>;
 
-  wrapper.find('.tr-transform__scale-point--ml').simulate('mousedown');
-  global.document.dispatchEvent(new Event('mousemove'));
-  global.document.dispatchEvent(new Event('mouseup'));
+  ReactDOM.render(element, div);
+  ReactDOM.unmountComponentAtNode(div);
 
-  wrapper.find('.tr-transform__scale-point--tr').simulate('mousedown');
-  global.document.dispatchEvent(new Event('mousemove'));
-  global.document.dispatchEvent(new Event('mouseup'));
+  const wrapper = mount(element)
 
-  wrapper.find('.tr-transform__scale-point--tm').simulate('mousedown');
+  wrapper.find('.tr-transform').simulate('mousedown');
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));
 
-  wrapper.find('.tr-transform__scale-point--mr').simulate('mousedown');
+
+  wrapper.find('.tr-transform__rotator').simulate('mousedown');
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));
 
-  wrapper.find('.tr-transform__scale-point--bl').simulate('mousedown');
+  Transform.SCALE_HANDLE_PRESETS['all'].forEach((position) => {
+    wrapper.find(`.tr-transform__scale-point--${position}`).simulate('mousedown');
+    global.document.dispatchEvent(new Event('mousemove'));
+    global.document.dispatchEvent(new Event('mouseup'));
+  })
+
+});
+
+it('renders with all events without crashing', () => {
+  const div = document.createElement('div');
+  const element = <Transform
+    {...testProps}
+    onTranslate={({x, y, scaleX, scaleY}) => {}}
+    onRotate={({x, y, scaleX, scaleY}) => {}}
+    onScale={({x, y, scaleX, scaleY}) => {}}
+    onTranslateStart={(event) => {}}
+    onRotateStart={(event) => {}}
+    onScaleStart={(event) => {}}
+    onTranslateEnd={(event) => {}}
+    onRotateEnd={(event) => {}}
+    onScaleEnd={(event) => {}}
+  >
+    <div/>
+  </Transform>;
+
+  ReactDOM.render(element, div);
+  ReactDOM.unmountComponentAtNode(div);
+
+  const wrapper = mount(element)
+
+  wrapper.find('.tr-transform').simulate('mousedown');
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));
 
-  wrapper.find('.tr-transform__scale-point--bm').simulate('mousedown');
+
+  wrapper.find('.tr-transform__rotator').simulate('mousedown');
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));
 
-  wrapper.find('.tr-transform__scale-point--br').simulate('mousedown');
+
+  Transform.SCALE_HANDLE_PRESETS['all'].forEach((position) => {
+    wrapper.find(`.tr-transform__scale-point--${position}`).simulate('mousedown');
+    global.document.dispatchEvent(new Event('mousemove'));
+    global.document.dispatchEvent(new Event('mouseup'));
+  })
+
+});
+
+it('the number of handles using scaleHandles is correct', () => {
+
+  const scaleHandles = ['tl', 'br', 'ml'];
+
+  const div = document.createElement('div');
+  const element = <Transform
+    {...testProps}
+    scaleHandles={scaleHandles}
+  >
+    <div/>
+  </Transform>;
+
+  ReactDOM.render(element, div);
+  ReactDOM.unmountComponentAtNode(div);
+
+  const wrapper = mount(element)
+
+  Transform.SCALE_HANDLE_PRESETS['all'].forEach((position) => {
+    let el = wrapper.find(`.tr-transform__scale-point--${position}`)
+    expect(el.length).toBe(+scaleHandles.includes(position));
+  })
+
+});
+
+it('can use scaleHandles presets correctly', () => {
+
+  const scaleHandles = ['corners'];
+  const expandedHandles = Transform.SCALE_HANDLE_PRESETS['corners']
+
+  const div = document.createElement('div');
+  const element = <Transform
+    {...testProps}
+    scaleHandles={scaleHandles}
+  >
+    <div/>
+  </Transform>;
+
+  ReactDOM.render(element, div);
+  ReactDOM.unmountComponentAtNode(div);
+
+  const wrapper = mount(element)
+
+  Transform.SCALE_HANDLE_PRESETS['all'].forEach((position) => {
+    let el = wrapper.find(`.tr-transform__scale-point--${position}`)
+    expect(el.length).toBe(+expandedHandles.includes(position));
+  })
+});
+
+it('rotation enable/disable working', () => {
+
+  const div = document.createElement('div');
+
+  for(let rotateEnabled of [false, true]) {
+    let element = <Transform
+      {...testProps}
+      rotateEnabled={rotateEnabled}
+    >
+      <div/>
+    </Transform>;
+
+    ReactDOM.render(element, div);
+    ReactDOM.unmountComponentAtNode(div);
+
+    let wrapper = mount(element)
+
+    let el = wrapper.find('.tr-transform__rotator')
+    expect(el.length).toBe(+rotateEnabled);
+  }
+
+});
+
+it('scale enable/disable working', () => {
+
+  const div = document.createElement('div');
+
+  for(let scaleEnabled of [false, true]) {
+    let element = <Transform
+      {...testProps}
+      scaleEnabled={scaleEnabled}
+    >
+      <div/>
+    </Transform>;
+
+    ReactDOM.render(element, div);
+    ReactDOM.unmountComponentAtNode(div);
+
+    let wrapper = mount(element)
+
+    let el = wrapper.find("[className*='tr-transform__scale-point--']")
+    expect(el.length).toBe((+scaleEnabled) * Transform.defaultProps.scaleHandles.length);
+  }
+
+});
+
+it("translation enable/disable didn't crash", () => {
+
+  const div = document.createElement('div');
+  const translateEnabled = false;
+
+  let element = <Transform
+    {...testProps}
+    translateEnabled={translateEnabled}
+  >
+    <div/>
+  </Transform>;
+
+  ReactDOM.render(element, div);
+  ReactDOM.unmountComponentAtNode(div);
+
+  let wrapper = mount(element)
+
+  wrapper.find('.tr-transform').simulate('mousedown');
   global.document.dispatchEvent(new Event('mousemove'));
   global.document.dispatchEvent(new Event('mouseup'));