From ecd766fba27f31f398bc296a6e9f30fdddc3c6ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Ce=CC=81sar=20Rey=20Me=CC=81ndez?= Date: Mon, 1 Jun 2020 15:33:55 -0400 Subject: [PATCH 1/5] add event with type and source in the onchange event --- index.html | 1 + src/RegionSelect.js | 43 +++++++++++++++++++++++++++++++++++++++---- src/example/App.js | 3 ++- 3 files changed, 42 insertions(+), 5 deletions(-) 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/src/RegionSelect.js b/src/RegionSelect.js index c0d31e2..181eb11 100644 --- a/src/RegionSelect.js +++ b/src/RegionSelect.js @@ -91,11 +91,19 @@ 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 + }); } onDocMouseTouchEnd () { if (this.isChanging) { @@ -108,11 +116,21 @@ 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 + }); } } onComponentMouseTouchDown (event) { @@ -135,6 +153,7 @@ class RegionSelect extends Component { isChanging: true }; this.regionCounter += 1; + this.regionChangeData = { imageOffsetLeft: imageOffset.left, imageOffsetTop: imageOffset.top, @@ -146,13 +165,29 @@ 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 + }); + 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 + }); 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 }); From e4b98535241e1c67332136219958f3d76adf81fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Ce=CC=81sar=20Rey=20Me=CC=81ndez?= Date: Mon, 1 Jun 2020 16:24:08 -0400 Subject: [PATCH 2/5] update build with jrey changes --- lib/RegionSelect.js | 42 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/lib/RegionSelect.js b/lib/RegionSelect.js index c5ceb6b..1b649ff 100644 --- a/lib/RegionSelect.js +++ b/lib/RegionSelect.js @@ -155,7 +155,15 @@ 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 + }); } }, { key: 'onDocMouseTouchEnd', @@ -170,7 +178,16 @@ 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 + }); } } }, { @@ -197,6 +214,7 @@ var RegionSelect = function (_Component) { isChanging: true }; this.regionCounter += 1; + this.regionChangeData = { imageOffsetLeft: imageOffset.left, imageOffsetTop: imageOffset.top, @@ -208,10 +226,26 @@ 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 + }); + 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 + }); this.regionChangeIndex = this.props.maxRegions - 1; } } From 2a71556b851d802de71acdcd06d0f93e68fbfe8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Ce=CC=81sar=20Rey=20Me=CC=81ndez?= Date: Mon, 1 Jun 2020 16:54:57 -0400 Subject: [PATCH 3/5] index was added to the event properties --- src/RegionSelect.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/RegionSelect.js b/src/RegionSelect.js index 181eb11..9d60248 100644 --- a/src/RegionSelect.js +++ b/src/RegionSelect.js @@ -102,7 +102,8 @@ class RegionSelect extends Component { ], { event: 'resize', source: event, - region: updatingRegion + region: updatingRegion, + index: index }); } onDocMouseTouchEnd () { @@ -129,7 +130,8 @@ class RegionSelect extends Component { ], { event: 'end', source: event, - region: updatingRegion + region: updatingRegion, + index: index }); } } @@ -171,7 +173,8 @@ class RegionSelect extends Component { this.props.onChange(this.props.regions.concat(rect), { event: 'start', source: event, - data: rect.data + data: rect.data, + index: 0 }); this.regionChangeIndex = this.props.regions.length; @@ -186,8 +189,10 @@ class RegionSelect extends Component { ], { event: 'start', source: event, - data: rect.data + data: rect.data, + index: 0 }); + this.regionChangeIndex = this.props.maxRegions - 1; } } From df7e63b9b76a412a330f1c1ebc6a8eb1e29ddfba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Ce=CC=81sar=20Rey=20Me=CC=81ndez?= Date: Mon, 1 Jun 2020 16:55:54 -0400 Subject: [PATCH 4/5] index was added to the event properties --- lib/RegionSelect.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/lib/RegionSelect.js b/lib/RegionSelect.js index 1b649ff..665f442 100644 --- a/lib/RegionSelect.js +++ b/lib/RegionSelect.js @@ -162,7 +162,8 @@ var RegionSelect = function (_Component) { 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 + region: updatingRegion, + index: index }); } }, { @@ -186,7 +187,8 @@ var RegionSelect = function (_Component) { 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 + region: updatingRegion, + index: index }); } } @@ -232,7 +234,8 @@ var RegionSelect = function (_Component) { this.props.onChange(this.props.regions.concat(rect), { event: 'start', source: event, - data: rect.data + data: rect.data, + index: 0 }); this.regionChangeIndex = this.props.regions.length; @@ -244,8 +247,10 @@ var RegionSelect = function (_Component) { this.props.onChange([].concat(_toConsumableArray(this.props.regions.slice(0, this.props.maxRegions - 1)), [rect]), { event: 'start', source: event, - data: rect.data + data: rect.data, + index: 0 }); + this.regionChangeIndex = this.props.maxRegions - 1; } } From 924b0219e654485209c2d47ba000c0e638e78c36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julio=20Ce=CC=81sar=20Rey=20Me=CC=81ndez?= Date: Mon, 1 Jun 2020 17:08:32 -0400 Subject: [PATCH 5/5] add start event with the length index --- lib/RegionSelect.js | 4 ++-- src/RegionSelect.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/RegionSelect.js b/lib/RegionSelect.js index 665f442..ea534ca 100644 --- a/lib/RegionSelect.js +++ b/lib/RegionSelect.js @@ -235,7 +235,7 @@ var RegionSelect = function (_Component) { event: 'start', source: event, data: rect.data, - index: 0 + index: this.props.regions.length }); this.regionChangeIndex = this.props.regions.length; @@ -248,7 +248,7 @@ var RegionSelect = function (_Component) { event: 'start', source: event, data: rect.data, - index: 0 + index: this.props.regions.length }); this.regionChangeIndex = this.props.maxRegions - 1; diff --git a/src/RegionSelect.js b/src/RegionSelect.js index 9d60248..72e64c2 100644 --- a/src/RegionSelect.js +++ b/src/RegionSelect.js @@ -174,7 +174,7 @@ class RegionSelect extends Component { event: 'start', source: event, data: rect.data, - index: 0 + index: this.props.regions.length }); this.regionChangeIndex = this.props.regions.length; @@ -190,9 +190,9 @@ class RegionSelect extends Component { event: 'start', source: event, data: rect.data, - index: 0 + index: this.props.regions.length }); - + this.regionChangeIndex = this.props.maxRegions - 1; } }