Skip to content

Commit

Permalink
feat: add support for dragging existing filters
Browse files Browse the repository at this point in the history
  • Loading branch information
@hkang1
hkang1 committed Feb 3, 2022
1 parent a0359a3 commit ec05dce
Show file tree
Hide file tree
Showing 9 changed files with 208 additions and 80 deletions.
63 changes: 46 additions & 17 deletions dist/hermes.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@ const isString = (data) => typeof data === 'string';
const clone = (data) => {
return JSON.parse(JSON.stringify(data));
};
const capDataRange = (data, range) => {
return Math.min(range[1], Math.max(range[0], data));
};
const getDataRange = (data) => {
return data.reduce((acc, x) => {
if (isNumber(x)) {
Expand Down Expand Up @@ -665,7 +668,7 @@ const DRAG = {
},
filters: {
active: FILTER,
axes: {},
existing: false,
key: undefined,
},
shared: {
Expand Down Expand Up @@ -1473,16 +1476,22 @@ class Hermes {
// See if there is an existing matching filter based on position.
const index = (_filters[key] || []).findIndex(filter => pos >= filter.p0 && pos <= filter.p1);
if (index !== -1) {
const filter = _filters[key][index];
_drf.active = _filters[key][index];
_drf.active.startP0 = filter.p0;
_drf.active.startP1 = filter.p1;
_drf.existing = true;
}
else {
_drf.active = { p0: pos, p1: pos, value0: value, value1: value };
_drf.existing = false;
// Store active filter into filter list.
_filters[key] = _filters[key] || [];
_filters[key].push(_drf.active);
}
}
updateActiveFilter(finalize = false) {
updateActiveFilter(e) {
var _a, _b;
if (!this._)
return;
const _dl = this._.dims.list;
Expand All @@ -1494,17 +1503,40 @@ class Hermes {
const filterKey = isHorizontal ? 'y' : 'x';
if (_drag.type !== DragType.DimensionFilterCreate || !_drf.key)
return;
// Update filter data before removing reference.
const bound = _dl[_drs.index].layout.bound;
const axisStart = _dl[_drs.index].layout.axisStart;
const axisStop = _dl[_drs.index].layout.axisStop;
// Cap the p1 position to the axis limits.
let p1 = _drs.p1[filterKey] - bound[filterKey] - axisStart[filterKey];
p1 = Math.min(axisStop[filterKey] - axisStart[filterKey], Math.max(0, p1));
_drf.active.p1 = p1;
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop[filterKey] - axisStart[filterKey], this.dimensions[_drs.index].axis.scale);
const axisStart = _dl[_drs.index].layout.axisStart[filterKey];
const axisStop = _dl[_drs.index].layout.axisStop[filterKey];
const axisRange = [0, axisStop - axisStart];
/**
* If the active filter previously exists, we want to drag it,
* otherwise we want to change the size of the new one based on event position.
*/
if (_drf.existing) {
const startP0 = (_a = _drf.active.startP0) !== null && _a !== void 0 ? _a : 0;
const startP1 = (_b = _drf.active.startP1) !== null && _b !== void 0 ? _b : 0;
const startLength = startP1 - startP0;
const shift = _drs.p1[filterKey] - _drs.p0[filterKey];
_drf.active.p0 = startP0 + shift;
_drf.active.p1 = startP1 + shift;
// Cap the drag to the axis edges.
if (_drf.active.p0 < axisRange[0]) {
_drf.active.p0 = 0;
_drf.active.p1 = startLength;
}
else if (_drf.active.p1 > axisRange[1]) {
_drf.active.p0 = axisRange[1] - startLength;
_drf.active.p1 = axisRange[1];
}
_drf.active.value0 = getAxisPositionValue(_drf.active.p0, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
}
else {
// Update filter data before removing reference.
_drf.active.p1 = capDataRange(_drs.p1[filterKey] - bound[filterKey] - axisStart, axisRange);
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
}
// Whether or not to finalize active filter and removing reference to it.
if (!finalize)
if (e.type !== 'mouseup')
return;
/**
* Check to see if the release event is near the starting event.
Expand All @@ -1525,7 +1557,7 @@ class Hermes {
[_drf.active.p0, _drf.active.value0] = [tempP, tempValue];
}
// Overwrite active filter to remove reference to filter in filters list.
_drf.active = FILTER;
_drf.active = { ...FILTER };
_drf.key = undefined;
this.mergeFilters();
}
Expand Down Expand Up @@ -1553,7 +1585,6 @@ class Hermes {
var _a;
if (!this._)
return;
// console.time('render time');
const { h, w } = this.size;
const _dl = this._.dims.list;
const _dsl = this._.dims.shared.label;
Expand Down Expand Up @@ -1669,7 +1700,6 @@ class Hermes {
drawRect(this.ctx, x, y, w, h, axesStyle.filter);
});
});
// console.timeEnd('render time');
}
drawDebugOutline() {
if (!this._)
Expand Down Expand Up @@ -1708,7 +1738,6 @@ class Hermes {
return;
const [x, y] = [e.clientX, e.clientY];
const _drag = this.drag;
this.filters;
const _drs = this.drag.shared;
const _drd = this.drag.dimension;
const _drf = this.drag.filters;
Expand Down Expand Up @@ -1779,7 +1808,7 @@ class Hermes {
}
}
// Update dimension filter creating dragging data.
this.updateActiveFilter();
this.updateActiveFilter(e);
this.calculate();
}
handleMouseUp(e) {
Expand All @@ -1788,7 +1817,7 @@ class Hermes {
const [x, y] = [e.clientX, e.clientY];
const _drs = this.drag.shared;
_drs.p1 = { x, y };
this.updateActiveFilter(true);
this.updateActiveFilter(e);
// Reset drag info.
this.drag = clone(DRAG);
this.calculate();
Expand Down
63 changes: 46 additions & 17 deletions dist/hermes.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,9 @@ const isString = (data) => typeof data === 'string';
const clone = (data) => {
return JSON.parse(JSON.stringify(data));
};
const capDataRange = (data, range) => {
return Math.min(range[1], Math.max(range[0], data));
};
const getDataRange = (data) => {
return data.reduce((acc, x) => {
if (isNumber(x)) {
Expand Down Expand Up @@ -663,7 +666,7 @@ const DRAG = {
},
filters: {
active: FILTER,
axes: {},
existing: false,
key: undefined,
},
shared: {
Expand Down Expand Up @@ -1471,16 +1474,22 @@ class Hermes {
// See if there is an existing matching filter based on position.
const index = (_filters[key] || []).findIndex(filter => pos >= filter.p0 && pos <= filter.p1);
if (index !== -1) {
const filter = _filters[key][index];
_drf.active = _filters[key][index];
_drf.active.startP0 = filter.p0;
_drf.active.startP1 = filter.p1;
_drf.existing = true;
}
else {
_drf.active = { p0: pos, p1: pos, value0: value, value1: value };
_drf.existing = false;
// Store active filter into filter list.
_filters[key] = _filters[key] || [];
_filters[key].push(_drf.active);
}
}
updateActiveFilter(finalize = false) {
updateActiveFilter(e) {
var _a, _b;
if (!this._)
return;
const _dl = this._.dims.list;
Expand All @@ -1492,17 +1501,40 @@ class Hermes {
const filterKey = isHorizontal ? 'y' : 'x';
if (_drag.type !== DragType.DimensionFilterCreate || !_drf.key)
return;
// Update filter data before removing reference.
const bound = _dl[_drs.index].layout.bound;
const axisStart = _dl[_drs.index].layout.axisStart;
const axisStop = _dl[_drs.index].layout.axisStop;
// Cap the p1 position to the axis limits.
let p1 = _drs.p1[filterKey] - bound[filterKey] - axisStart[filterKey];
p1 = Math.min(axisStop[filterKey] - axisStart[filterKey], Math.max(0, p1));
_drf.active.p1 = p1;
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop[filterKey] - axisStart[filterKey], this.dimensions[_drs.index].axis.scale);
const axisStart = _dl[_drs.index].layout.axisStart[filterKey];
const axisStop = _dl[_drs.index].layout.axisStop[filterKey];
const axisRange = [0, axisStop - axisStart];
/**
* If the active filter previously exists, we want to drag it,
* otherwise we want to change the size of the new one based on event position.
*/
if (_drf.existing) {
const startP0 = (_a = _drf.active.startP0) !== null && _a !== void 0 ? _a : 0;
const startP1 = (_b = _drf.active.startP1) !== null && _b !== void 0 ? _b : 0;
const startLength = startP1 - startP0;
const shift = _drs.p1[filterKey] - _drs.p0[filterKey];
_drf.active.p0 = startP0 + shift;
_drf.active.p1 = startP1 + shift;
// Cap the drag to the axis edges.
if (_drf.active.p0 < axisRange[0]) {
_drf.active.p0 = 0;
_drf.active.p1 = startLength;
}
else if (_drf.active.p1 > axisRange[1]) {
_drf.active.p0 = axisRange[1] - startLength;
_drf.active.p1 = axisRange[1];
}
_drf.active.value0 = getAxisPositionValue(_drf.active.p0, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
}
else {
// Update filter data before removing reference.
_drf.active.p1 = capDataRange(_drs.p1[filterKey] - bound[filterKey] - axisStart, axisRange);
_drf.active.value1 = getAxisPositionValue(_drf.active.p1, axisStop - axisStart, this.dimensions[_drs.index].axis.scale);
}
// Whether or not to finalize active filter and removing reference to it.
if (!finalize)
if (e.type !== 'mouseup')
return;
/**
* Check to see if the release event is near the starting event.
Expand All @@ -1523,7 +1555,7 @@ class Hermes {
[_drf.active.p0, _drf.active.value0] = [tempP, tempValue];
}
// Overwrite active filter to remove reference to filter in filters list.
_drf.active = FILTER;
_drf.active = { ...FILTER };
_drf.key = undefined;
this.mergeFilters();
}
Expand Down Expand Up @@ -1551,7 +1583,6 @@ class Hermes {
var _a;
if (!this._)
return;
// console.time('render time');
const { h, w } = this.size;
const _dl = this._.dims.list;
const _dsl = this._.dims.shared.label;
Expand Down Expand Up @@ -1667,7 +1698,6 @@ class Hermes {
drawRect(this.ctx, x, y, w, h, axesStyle.filter);
});
});
// console.timeEnd('render time');
}
drawDebugOutline() {
if (!this._)
Expand Down Expand Up @@ -1706,7 +1736,6 @@ class Hermes {
return;
const [x, y] = [e.clientX, e.clientY];
const _drag = this.drag;
this.filters;
const _drs = this.drag.shared;
const _drd = this.drag.dimension;
const _drf = this.drag.filters;
Expand Down Expand Up @@ -1777,7 +1806,7 @@ class Hermes {
}
}
// Update dimension filter creating dragging data.
this.updateActiveFilter();
this.updateActiveFilter(e);
this.calculate();
}
handleMouseUp(e) {
Expand All @@ -1786,7 +1815,7 @@ class Hermes {
const [x, y] = [e.clientX, e.clientY];
const _drs = this.drag.shared;
_drs.p1 = { x, y };
this.updateActiveFilter(true);
this.updateActiveFilter(e);
// Reset drag info.
this.drag = clone(DRAG);
this.calculate();
Expand Down

0 comments on commit ec05dce

Please sign in to comment.