Skip to content

Commit f4aa985

Browse files
flekschasflekschas
committed
Rename recticle to reticle
Fix #47
1 parent cc0a9f6 commit f4aa985

5 files changed

Lines changed: 88 additions & 79 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
## Next
22

3+
## v0.18.1
4+
5+
- Rename `showRecticle` to `showReticle` and `recticleColor` to `reticleColor` (#47)
6+
37
## v0.18.0
48

59
- Add density-based dynamic point opacity via `opacityBy: 'density'`. See

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -389,8 +389,8 @@ can be read and written via [`scatterplot.get()`](#scatterplot.get) and [`scatte
389389
| lassoInitiator | boolean | `false` | | `true` | `false` |
390390
| lassoInitiatorElement | object | the lasso dom element | | `false` | `false` |
391391
| lassoInitiatorParentElement | object | `document.body` | | `true` | `false` |
392-
| showRecticle | boolean | `false` | `true` or `false` | `true` | `false` |
393-
| recticleColor | quadruple | rgba(1, 1, 1, .5) | hex, rgb, rgba | `true` | `false` |
392+
| showReticle | boolean | `false` | `true` or `false` | `true` | `false` |
393+
| reticleColor | quadruple | rgba(1, 1, 1, .5) | hex, rgb, rgba | `true` | `false` |
394394
| xScale | function | `null` | must follow the D3 scale API | `true` | `true` |
395395
| yScale | function | `null` | must follow the D3 scale API | `true` | `true` |
396396
| keyMap | object | `{ alt: 'rotate', shift: 'lasso' }` | See the notes below | `true` | `false` |
@@ -564,8 +564,8 @@ scatterplot.set({
564564
lassoClearEvent: 'deselect',
565565
});
566566

567-
// Activate recticle and set recticle color to red
568-
scatterplot.set({ showRecticle: true, recticleColor: [1, 0, 0, 0.66] });
567+
// Activate reticle and set reticle color to red
568+
scatterplot.set({ showReticle: true, reticleColor: [1, 0, 0, 0.66] });
569569
```
570570

571571
### Events

‎src/constants.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ export const DEFAULT_VIEW = new Float32Array([
122122
// Default misc
123123
export const DEFAULT_BACKGROUND_IMAGE = null;
124124
export const DEFAULT_LASSO_COLOR = [0, 0.666666667, 1, 1];
125-
export const DEFAULT_SHOW_RECTICLE = false;
126-
export const DEFAULT_RECTICLE_COLOR = [1, 1, 1, 0.5];
125+
export const DEFAULT_SHOW_RETICLE = false;
126+
export const DEFAULT_RETICLE_COLOR = [1, 1, 1, 0.5];
127127
export const DEFAULT_DESELECT_ON_DBL_CLICK = true;
128128
export const DEFAULT_DESELECT_ON_ESCAPE = true;
129129
export const DEFAULT_SHOW_POINT_CONNECTIONS = false;

‎src/index.js‎

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ import {
4545
DEFAULT_LASSO_MIN_DELAY,
4646
DEFAULT_LASSO_MIN_DIST,
4747
DEFAULT_LASSO_CLEAR_EVENT,
48-
DEFAULT_SHOW_RECTICLE,
49-
DEFAULT_RECTICLE_COLOR,
48+
DEFAULT_SHOW_RETICLE,
49+
DEFAULT_RETICLE_COLOR,
5050
DEFAULT_POINT_CONNECTION_COLOR_NORMAL,
5151
DEFAULT_POINT_CONNECTION_COLOR_ACTIVE,
5252
DEFAULT_POINT_CONNECTION_COLOR_HOVER,
@@ -123,7 +123,10 @@ import {
123123

124124
import { version } from '../package.json';
125125

126-
const deprecations = {};
126+
const deprecations = {
127+
showRecticle: 'showReticle',
128+
recticleColor: 'reticleColor',
129+
};
127130

128131
const checkDeprecations = (properties) => {
129132
Object.keys(properties)
@@ -132,6 +135,8 @@ const checkDeprecations = (properties) => {
132135
console.warn(
133136
`regl-scatterplot: the "${name}" property is deprecated. Please use "${deprecations[name]}" instead.`
134137
);
138+
properties[deprecations[name]] = properties[name];
139+
delete properties[name];
135140
});
136141
};
137142

@@ -206,8 +211,8 @@ const createScatterplot = (initialProperties = {}) => {
206211
lassoInitiatorParentElement = document.body,
207212
keyMap = DEFAULT_KEY_MAP,
208213
mouseMode = DEFAULT_MOUSE_MODE,
209-
showRecticle = DEFAULT_SHOW_RECTICLE,
210-
recticleColor = DEFAULT_RECTICLE_COLOR,
214+
showReticle = DEFAULT_SHOW_RETICLE,
215+
reticleColor = DEFAULT_RETICLE_COLOR,
211216
pointColor = DEFAULT_COLOR_NORMAL,
212217
pointColorActive = DEFAULT_COLOR_ACTIVE,
213218
pointColorHover = DEFAULT_COLOR_HOVER,
@@ -255,7 +260,7 @@ const createScatterplot = (initialProperties = {}) => {
255260

256261
backgroundColor = toRgba(backgroundColor, true);
257262
lassoColor = toRgba(lassoColor, true);
258-
recticleColor = toRgba(recticleColor, true);
263+
reticleColor = toRgba(reticleColor, true);
259264

260265
const fboRes = [512, 512];
261266
const fbo = regl.framebuffer({
@@ -285,8 +290,8 @@ const createScatterplot = (initialProperties = {}) => {
285290
let pointConnections;
286291
let pointConnectionMap;
287292
let computingPointConnectionCurves;
288-
let recticleHLine;
289-
let recticleVLine;
293+
let reticleHLine;
294+
let reticleVLine;
290295
let computedPointSizeMouseDetection;
291296
let keyActionMap = flipObj(keyMap);
292297
let lassoInitiatorTimeout;
@@ -417,7 +422,7 @@ const createScatterplot = (initialProperties = {}) => {
417422
let isTransitioning = false;
418423
let transitionStartTime = null;
419424
let transitionRafId = null;
420-
let preTransitionShowRecticle = showRecticle;
425+
let preTransitionShowReticle = showReticle;
421426

422427
let colorTex; // Stores the point color texture
423428
let colorTexRes = 0; // Width and height of the texture
@@ -1436,7 +1441,7 @@ const createScatterplot = (initialProperties = {}) => {
14361441
.map((_, i) => [0, i + 1, i + 2]),
14371442
});
14381443

1439-
const drawRecticle = () => {
1444+
const drawReticle = () => {
14401445
if (!(hoveredPoint >= 0)) return;
14411446

14421447
const [x, y] = searchIndex.points[hoveredPoint].slice(0, 2);
@@ -1446,7 +1451,7 @@ const createScatterplot = (initialProperties = {}) => {
14461451

14471452
// We have to calculate the model-view-projection matrix outside of the
14481453
// shader as we actually don't want the mode, view, or projection of the
1449-
// line view space to change such that the recticle is visualized across the
1454+
// line view space to change such that the reticle is visualized across the
14501455
// entire view container and not within the view of the scatterplot
14511456
mat4.multiply(
14521457
scratch,
@@ -1456,11 +1461,11 @@ const createScatterplot = (initialProperties = {}) => {
14561461

14571462
vec4.transformMat4(v, v, scratch);
14581463

1459-
recticleHLine.setPoints([-1, v[1], 1, v[1]]);
1460-
recticleVLine.setPoints([v[0], 1, v[0], -1]);
1464+
reticleHLine.setPoints([-1, v[1], 1, v[1]]);
1465+
reticleVLine.setPoints([v[0], 1, v[0], -1]);
14611466

1462-
recticleHLine.draw();
1463-
recticleVLine.draw();
1467+
reticleHLine.draw();
1468+
reticleVLine.draw();
14641469

14651470
// Draw outer outline
14661471
drawPoints(
@@ -1780,7 +1785,7 @@ const createScatterplot = (initialProperties = {}) => {
17801785
opacityByDensityDebounceTime
17811786
);
17821787

1783-
const draw = (showRecticleOnce) => {
1788+
const draw = (showReticleOnce) => {
17841789
if (!isInit || !regl) return;
17851790

17861791
// Update camera
@@ -1821,7 +1826,7 @@ const createScatterplot = (initialProperties = {}) => {
18211826
});
18221827

18231828
drawPointBodies();
1824-
if (!mouseDown && (showRecticle || showRecticleOnce)) drawRecticle();
1829+
if (!mouseDown && (showReticle || showReticleOnce)) drawReticle();
18251830
if (hoveredPoint >= 0) drawHoveredPoint();
18261831
if (selection.length) drawSelectedPoint();
18271832
});
@@ -1867,7 +1872,7 @@ const createScatterplot = (initialProperties = {}) => {
18671872
const endTransition = () => {
18681873
isTransitioning = false;
18691874
transitionStartTime = null;
1870-
showRecticle = preTransitionShowRecticle;
1875+
showReticle = preTransitionShowReticle;
18711876

18721877
clearCachedPoints();
18731878

@@ -1897,8 +1902,8 @@ const createScatterplot = (initialProperties = {}) => {
18971902

18981903
isTransitioning = true;
18991904
transitionStartTime = null;
1900-
preTransitionShowRecticle = showRecticle;
1901-
showRecticle = false;
1905+
preTransitionShowReticle = showReticle;
1906+
showReticle = false;
19021907

19031908
transition(duration, easingFn, drawArgs);
19041909
pubSub.publish('transitionStart');
@@ -1925,7 +1930,7 @@ const createScatterplot = (initialProperties = {}) => {
19251930
) {
19261931
setPointConnections(newPoints).then(() => {
19271932
pubSub.publish('pointConnectionsDraw');
1928-
drawRaf(options.showRecticleOnce);
1933+
drawRaf(options.showReticleOnce);
19291934
});
19301935
}
19311936
}
@@ -1937,7 +1942,7 @@ const createScatterplot = (initialProperties = {}) => {
19371942
// Point connects cannot be transitioned yet so we hide them during
19381943
// the transition. Hence, we need to make sure we call `draw()` once
19391944
// the transition has ended.
1940-
drawRaf(options.showRecticleOnce);
1945+
drawRaf(options.showReticleOnce);
19411946
resolve();
19421947
},
19431948
1
@@ -1947,11 +1952,11 @@ const createScatterplot = (initialProperties = {}) => {
19471952
duration: options.transitionDuration,
19481953
easing: options.transitionEasing,
19491954
},
1950-
[options.showRecticleOnce]
1955+
[options.showReticleOnce]
19511956
);
19521957
} else {
19531958
pubSub.subscribe('draw', resolve, 1);
1954-
drawRaf(options.showRecticleOnce);
1959+
drawRaf(options.showReticleOnce);
19551960
}
19561961
});
19571962

@@ -2103,19 +2108,19 @@ const createScatterplot = (initialProperties = {}) => {
21032108
});
21042109
};
21052110

2106-
const setShowRecticle = (newShowRecticle) => {
2107-
if (newShowRecticle === null) return;
2111+
const setShowReticle = (newShowReticle) => {
2112+
if (newShowReticle === null) return;
21082113

2109-
showRecticle = newShowRecticle;
2114+
showReticle = newShowReticle;
21102115
};
21112116

2112-
const setRecticleColor = (newRecticleColor) => {
2113-
if (!newRecticleColor) return;
2117+
const setReticleColor = (newReticleColor) => {
2118+
if (!newReticleColor) return;
21142119

2115-
recticleColor = toRgba(newRecticleColor, true);
2120+
reticleColor = toRgba(newReticleColor, true);
21162121

2117-
recticleHLine.setStyle({ color: recticleColor });
2118-
recticleVLine.setStyle({ color: recticleColor });
2122+
reticleHLine.setStyle({ color: reticleColor });
2123+
reticleVLine.setStyle({ color: reticleColor });
21192124
};
21202125

21212126
const setXScale = (newXScale) => {
@@ -2349,9 +2354,9 @@ const createScatterplot = (initialProperties = {}) => {
23492354
return pointConnectionMaxIntPointsPerSegment;
23502355
if (property === 'pointConnectionTolerance')
23512356
return pointConnectionTolerance;
2352-
if (property === 'recticleColor') return recticleColor;
2357+
if (property === 'reticleColor') return reticleColor;
23532358
if (property === 'regl') return regl;
2354-
if (property === 'showRecticle') return showRecticle;
2359+
if (property === 'showReticle') return showReticle;
23552360
if (property === 'version') return version;
23562361
if (property === 'width') return width;
23572362
if (property === 'xScale') return xScale;
@@ -2518,12 +2523,12 @@ const createScatterplot = (initialProperties = {}) => {
25182523
setMouseMode(properties.mouseMode);
25192524
}
25202525

2521-
if (properties.showRecticle !== undefined) {
2522-
setShowRecticle(properties.showRecticle);
2526+
if (properties.showReticle !== undefined) {
2527+
setShowReticle(properties.showReticle);
25232528
}
25242529

2525-
if (properties.recticleColor !== undefined) {
2526-
setRecticleColor(properties.recticleColor);
2530+
if (properties.reticleColor !== undefined) {
2531+
setReticleColor(properties.reticleColor);
25272532
}
25282533

25292534
if (properties.pointOutlineWidth !== undefined) {
@@ -2578,7 +2583,7 @@ const createScatterplot = (initialProperties = {}) => {
25782583
});
25792584
};
25802585

2581-
const hover = (point, showRecticleOnce = false) => {
2586+
const hover = (point, showReticleOnce = false) => {
25822587
let needsRedraw = false;
25832588

25842589
if (point >= 0) {
@@ -2605,7 +2610,7 @@ const createScatterplot = (initialProperties = {}) => {
26052610
hoveredPoint = undefined;
26062611
}
26072612

2608-
if (needsRedraw) drawRaf(null, showRecticleOnce);
2613+
if (needsRedraw) drawRaf(null, showReticleOnce);
26092614
};
26102615

26112616
const initCamera = () => {
@@ -2712,13 +2717,13 @@ const createScatterplot = (initialProperties = {}) => {
27122717
widthActive: pointConnectionSizeActive,
27132718
is2d: true,
27142719
});
2715-
recticleHLine = createLine(regl, {
2716-
color: recticleColor,
2720+
reticleHLine = createLine(regl, {
2721+
color: reticleColor,
27172722
width: 1,
27182723
is2d: true,
27192724
});
2720-
recticleVLine = createLine(regl, {
2721-
color: recticleColor,
2725+
reticleVLine = createLine(regl, {
2726+
color: reticleColor,
27222727
width: 1,
27232728
is2d: true,
27242729
});
@@ -2780,8 +2785,8 @@ const createScatterplot = (initialProperties = {}) => {
27802785
regl = undefined;
27812786
lasso.destroy();
27822787
pointConnections.destroy();
2783-
recticleHLine.destroy();
2784-
recticleVLine.destroy();
2788+
reticleHLine.destroy();
2789+
reticleVLine.destroy();
27852790
pubSub.clear();
27862791
};
27872792

0 commit comments

Comments
 (0)