diff --git a/index.html b/index.html
index 13b2b44..a23d88b 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
Sample App
+ Sample App
diff --git a/lib/RegionSelect.js b/lib/RegionSelect.js
index c5ceb6b..ea534ca 100644
--- a/lib/RegionSelect.js
+++ b/lib/RegionSelect.js
@@ -155,7 +155,16 @@ var RegionSelect = function (_Component) {
height: height,
isChanging: true
};
- this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, index)), [(0, _objectAssign2.default)({}, updatingRegion, rect)], _toConsumableArray(this.props.regions.slice(index + 1))));
+ /**
+ Add event with resize and region
+ **/
+
+ this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, index)), [(0, _objectAssign2.default)({}, updatingRegion, rect)], _toConsumableArray(this.props.regions.slice(index + 1))), {
+ event: 'resize',
+ source: event,
+ region: updatingRegion,
+ index: index
+ });
}
}, {
key: 'onDocMouseTouchEnd',
@@ -170,7 +179,17 @@ var RegionSelect = function (_Component) {
};
this.regionChangeIndex = null;
this.regionChangeData = null;
- this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, index)), [(0, _objectAssign2.default)({}, updatingRegion, changes)], _toConsumableArray(this.props.regions.slice(index + 1))));
+
+ /**
+ Add event with end and region
+ **/
+
+ this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, index)), [(0, _objectAssign2.default)({}, updatingRegion, changes)], _toConsumableArray(this.props.regions.slice(index + 1))), {
+ event: 'end',
+ source: event,
+ region: updatingRegion,
+ index: index
+ });
}
}
}, {
@@ -197,6 +216,7 @@ var RegionSelect = function (_Component) {
isChanging: true
};
this.regionCounter += 1;
+
this.regionChangeData = {
imageOffsetLeft: imageOffset.left,
imageOffsetTop: imageOffset.top,
@@ -208,10 +228,29 @@ var RegionSelect = function (_Component) {
};
if (this.props.regions.length < this.props.maxRegions) {
- this.props.onChange(this.props.regions.concat(rect));
+ /**
+ Add event with start
+ **/
+ this.props.onChange(this.props.regions.concat(rect), {
+ event: 'start',
+ source: event,
+ data: rect.data,
+ index: this.props.regions.length
+ });
+
this.regionChangeIndex = this.props.regions.length;
} else {
- this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, this.props.maxRegions - 1)), [rect]));
+ /**
+ Add event with start
+ **/
+
+ this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, this.props.maxRegions - 1)), [rect]), {
+ event: 'start',
+ source: event,
+ data: rect.data,
+ index: this.props.regions.length
+ });
+
this.regionChangeIndex = this.props.maxRegions - 1;
}
}
diff --git a/src/RegionSelect.js b/src/RegionSelect.js
index c0d31e2..72e64c2 100644
--- a/src/RegionSelect.js
+++ b/src/RegionSelect.js
@@ -91,11 +91,20 @@ class RegionSelect extends Component {
height: height,
isChanging: true
};
+ /**
+ Add event with resize and region
+ **/
+
this.props.onChange([
...this.props.regions.slice(0, index),
objectAssign({}, updatingRegion, rect),
...this.props.regions.slice(index + 1)
- ]);
+ ], {
+ event: 'resize',
+ source: event,
+ region: updatingRegion,
+ index: index
+ });
}
onDocMouseTouchEnd () {
if (this.isChanging) {
@@ -108,11 +117,22 @@ class RegionSelect extends Component {
};
this.regionChangeIndex = null;
this.regionChangeData = null;
+
+ /**
+ Add event with end and region
+ **/
+
+
this.props.onChange([
...this.props.regions.slice(0, index),
objectAssign({}, updatingRegion, changes),
...this.props.regions.slice(index + 1)
- ]);
+ ], {
+ event: 'end',
+ source: event,
+ region: updatingRegion,
+ index: index
+ });
}
}
onComponentMouseTouchDown (event) {
@@ -135,6 +155,7 @@ class RegionSelect extends Component {
isChanging: true
};
this.regionCounter += 1;
+
this.regionChangeData = {
imageOffsetLeft: imageOffset.left,
imageOffsetTop: imageOffset.top,
@@ -146,13 +167,32 @@ class RegionSelect extends Component {
};
if (this.props.regions.length < this.props.maxRegions) {
- this.props.onChange(this.props.regions.concat(rect));
+ /**
+ Add event with start
+ **/
+ this.props.onChange(this.props.regions.concat(rect), {
+ event: 'start',
+ source: event,
+ data: rect.data,
+ index: this.props.regions.length
+ });
+
this.regionChangeIndex = this.props.regions.length;
} else {
+ /**
+ Add event with start
+ **/
+
this.props.onChange([
...this.props.regions.slice(0, this.props.maxRegions - 1),
rect
- ]);
+ ], {
+ event: 'start',
+ source: event,
+ data: rect.data,
+ index: this.props.regions.length
+ });
+
this.regionChangeIndex = this.props.maxRegions - 1;
}
}
diff --git a/src/example/App.js b/src/example/App.js
index 6865a86..78ee0f5 100644
--- a/src/example/App.js
+++ b/src/example/App.js
@@ -13,7 +13,8 @@ class App extends Component {
regions: []
};
}
- onChange (regions) {
+ onChange (regions, event) {
+ console.log('onchange', [event]);
this.setState({
regions: regions
});