Skip to content

Commit bd10a1b

Browse files
oscarlorentzonoscarlorentzon
committed
feat: change color api to override current mode
1 parent 17446cf commit bd10a1b

12 files changed

Lines changed: 405 additions & 289 deletions

File tree

‎config/tsconfig.test.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"extends": "../tsconfig.json",
33
"compilerOptions": {
44
"declaration": false,
5+
"downlevelIteration": true,
56
"module": "commonjs",
67
"outDir": "../build/cjs/",
78
"sourceMap": false,

‎declarations/mapillary.js.flow‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2409,7 +2409,6 @@ declare var CameraVisualizationMode: {|
24092409
+Cluster: 2, // 2
24102410
+ConnectedComponent: 3, // 3
24112411
+Sequence: 4, // 4
2412-
+Manual: 5, // 2
24132412
|};
24142413

24152414
declare var OriginalPositionMode: {|
@@ -2422,7 +2421,6 @@ declare var PointVisualizationMode: {|
24222421
+Hidden: 0, // 0
24232422
+Original: 1, // 1
24242423
+Cluster: 2, // 2
2425-
+Manual: 3, // 2
24262424
|};
24272425

24282426
/**
@@ -6607,24 +6605,13 @@ declare class SpatialComponent extends Component<SpatialConfiguration> {
66076605
constructor(name: string, container: Container, navigator: Navigator): this;
66086606

66096607
/**
6610-
* Configure the cluster color used when painting
6611-
* clusters manually.
6612-
*
6613-
* @description The configured color is applied when the
6614-
* following visualization modes are set respectively:
6615-
*
6616-
* {@link CameraVisualizationMode.Manual}
6617-
* {@link PointVisualizationMode.Manual}
6618-
*
6619-
* @param {string} clusterId - Id of the cluster to configure.
6620-
* @param {number} color - The color to paint the cluster with.
6621-
*
6622-
* @example
6623-
* ```js
6624-
* spatialComponent.configureClusterColor('my-cluster-id', 0x00ff00);
6625-
* ```
6608+
* Get the currently set camera frame override color, or null if
6609+
* no color is set.
6610+
* @param {string} clusterId - Id of the cluster.
6611+
* @returns {string | number | null} The current override color
6612+
* for the cluster.
66266613
*/
6627-
configureClusterColor(clusterId: string, color: number | string): void;
6614+
getCameraOverrideColor(clusterId: string): string | number | null;
66286615

66296616
/**
66306617
* Returns the image id of the camera frame closest to the current
@@ -6648,6 +6635,44 @@ declare class SpatialComponent extends Component<SpatialConfiguration> {
66486635
* ```
66496636
*/
66506637
getFrameIdAt(pixelPoint: number[]): Promise<string>;
6638+
6639+
/**
6640+
* Get the currently set point override color, or null if
6641+
* no color is set.
6642+
* @param {string} clusterId - Id of the cluster.
6643+
* @returns {string | number | null} The current override color
6644+
* for the cluster.
6645+
*/
6646+
getPointOverrideColor(clusterId: string): string | number | null;
6647+
6648+
/**
6649+
* Override the camera color for a cluster.
6650+
* @description The configured color is applied for all visible
6651+
* visualization modes, overriding the color of the currently
6652+
* selected mode.
6653+
* @param {string} clusterId - Id of the cluster to configure.
6654+
* @param {number | string} color - The color to paint the cameras with.
6655+
* @example ```js
6656+
* spatialComponent.setCameraOverrideColor('my-cluster-id', 0x00ff00);
6657+
* ```
6658+
*/
6659+
setCameraOverrideColor(
6660+
clusterId: string,
6661+
color: number | string | null
6662+
): void;
6663+
6664+
/**
6665+
* Override the point color for a cluster.
6666+
* @description The configured color is applied for all visible
6667+
* visualization modes, overriding the color of the currently
6668+
* selected mode.
6669+
* @param {string} clusterId - Id of the cluster to configure.
6670+
* @param {number | string} color - The color to paint the points with.
6671+
* @example ```js
6672+
* spatialComponent.setPointOverrideColor('my-cluster-id', 0x00ff00);
6673+
* ```
6674+
*/
6675+
setPointOverrideColor(clusterId: string, color: number | string | null): void;
66516676
_activate(): void;
66526677
_deactivate(): void;
66536678
_getDefaultConfiguration(): SpatialConfiguration;

‎examples/debug/spatial.html‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
import {
3434
CameraControls,
3535
CameraVisualizationMode,
36+
GraphDataProvider,
3637
OriginalPositionMode,
3738
PointVisualizationMode,
3839
Viewer,
@@ -43,34 +44,63 @@
4344

4445
let cameraControls = CameraControls.Earth;
4546
let spatialActive = true;
47+
48+
const dataProvider = new GraphDataProvider({ accessToken });
4649
const viewer = new Viewer({
47-
accessToken,
4850
cameraControls,
4951
component: { cover: false, spatial: spatialActive },
5052
container: "mly",
53+
dataProvider,
5154
});
5255

5356
viewer.moveTo(imageId).catch((error) => console.error(error));
5457

5558
const spatial = viewer.getComponent("spatial");
59+
5660
viewer.on("click", (event) => {
5761
spatial
5862
.getFrameIdAt(event.pixelPoint)
5963
.then((id) => console.log("Clicked frame:", id));
6064
});
6165

62-
function randomColor() {
63-
return `hsl(${Math.floor(360 * Math.random())}, 100%, 75%)`;
64-
}
66+
let hoveredImageId = null;
67+
let paintedClusterId = null;
68+
viewer.on("mousemove", async (event) => {
69+
function paintCluster(clusterId, color) {
70+
spatial.setPointOverrideColor(clusterId, color);
71+
spatial.setCameraOverrideColor(clusterId, color);
72+
}
6573

66-
const colors = new Set();
67-
viewer.on("image", (event) => {
68-
const clusterId = event.image.clusterId;
69-
if (colors.has(clusterId)) {
74+
const imageId = await spatial.getFrameIdAt(event.pixelPoint);
75+
if (imageId === hoveredImageId) {
7076
return;
7177
}
72-
colors.add(clusterId);
73-
spatial.configureClusterColor(clusterId, randomColor());
78+
hoveredImageId = imageId;
79+
80+
if (paintedClusterId != null) {
81+
paintCluster(paintedClusterId, null);
82+
paintedClusterId = null;
83+
}
84+
85+
if (hoveredImageId == null) {
86+
return;
87+
}
88+
89+
const images = await dataProvider.getImages([imageId]);
90+
if (images.length !== 1) {
91+
return;
92+
}
93+
const image = images[0];
94+
if (image.node.id !== hoveredImageId) {
95+
return;
96+
}
97+
const clusterId = image.node.cluster.id;
98+
if (clusterId === paintedClusterId) {
99+
return;
100+
}
101+
102+
paintCluster(clusterId, 0xff00ff);
103+
paintedClusterId = clusterId;
74104
});
75105

76106
const s = Object.assign({}, spatial.defaultConfiguration, {
@@ -84,14 +114,12 @@
84114
const cluster = camMode.Cluster;
85115
const connectedComponent = camMode.ConnectedComponent;
86116
const sequence = camMode.Sequence;
87-
const manual = camMode.Manual;
88117
const camModeRotation = {};
89118
camModeRotation[hidden] = homogeneous;
90119
camModeRotation[homogeneous] = cluster;
91120
camModeRotation[cluster] = connectedComponent;
92121
camModeRotation[connectedComponent] = sequence;
93-
camModeRotation[sequence] = manual;
94-
camModeRotation[manual] = hidden;
122+
camModeRotation[sequence] = hidden;
95123

96124
return function () {
97125
s.cameraVisualizationMode =
@@ -136,12 +164,10 @@
136164
const hidden = PointVisualizationMode.Hidden;
137165
const original = PointVisualizationMode.Original;
138166
const cluster = PointVisualizationMode.Cluster;
139-
const manual = PointVisualizationMode.Manual;
140167
const pvmRotation = {};
141168
pvmRotation[hidden] = original;
142169
pvmRotation[original] = cluster;
143-
pvmRotation[cluster] = manual;
144-
pvmRotation[manual] = hidden;
170+
pvmRotation[cluster] = hidden;
145171

146172
return function () {
147173
s.pointVisualizationMode =
@@ -172,12 +198,6 @@
172198
};
173199
})();
174200

175-
function resetManualColor() {
176-
for (const clusterId of colors.keys()) {
177-
spatial.configureClusterColor(clusterId, randomColor());
178-
}
179-
}
180-
181201
window.document.addEventListener("keydown", (e) => {
182202
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
183203
return;
@@ -224,9 +244,6 @@
224244
case "f":
225245
setFilter();
226246
break;
227-
case "m":
228-
resetManualColor();
229-
break;
230247
default:
231248
break;
232249
}

‎src/component/spatial/Modes.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ export function isModeVisible(mode: CameraVisualizationMode): boolean {
55
return mode !== CameraVisualizationMode.Hidden;
66
}
77

8-
export function isModeManual(mode: CameraVisualizationMode): boolean {
9-
return mode === CameraVisualizationMode.Manual;
10-
}
11-
128
export function isOverviewState(state: State): boolean {
139
return state === State.Custom || state === State.Earth;
1410
}

‎src/component/spatial/SpatialCommon.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { LngLatAlt } from "../../api/interfaces/LngLatAlt";
22
import { enuToGeodetic, geodeticToEnu } from "../../geo/GeoCoords";
33

4-
export const SPATIAL_DEFAULT_MANUAL_COLOR = 0xFFFFFF;
4+
export const SPATIAL_DEFAULT_COLOR = 0xFFFFFF;
55

66
export function resetEnu(reference: LngLatAlt, prevEnu: number[], prevReference: LngLatAlt): number[] {
77
const [prevX, prevY, prevZ] = prevEnu;

‎src/component/spatial/SpatialComponent.ts‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,19 @@ export class SpatialComponent extends Component<SpatialConfiguration> {
9797
this._spatial = new Spatial();
9898
}
9999

100+
/**
101+
* Get the currently set camera frame override color, or null if
102+
* no color is set.
103+
*
104+
* @param {string} clusterId - Id of the cluster.
105+
*
106+
* @returns {string | number | null} The current override color
107+
* for the cluster.
108+
*/
109+
public getCameraOverrideColor(clusterId: string): string | number | null {
110+
return this._scene.getCameraOverrideColor(clusterId);
111+
}
112+
100113
/**
101114
* Returns the image id of the camera frame closest to the current
102115
* render camera position at the specified point.
@@ -149,27 +162,58 @@ export class SpatialComponent extends Component<SpatialConfiguration> {
149162
}
150163

151164
/**
152-
* Configure the cluster color used when painting
153-
* clusters manually.
165+
* Get the currently set point override color, or null if
166+
* no color is set.
167+
*
168+
* @param {string} clusterId - Id of the cluster.
169+
*
170+
* @returns {string | number | null} The current override color
171+
* for the cluster.
172+
*/
173+
public getPointOverrideColor(clusterId: string): string | number | null {
174+
return this._scene.getPointOverrideColor(clusterId);
175+
}
176+
177+
/**
178+
* Override the camera color for a cluster.
154179
*
155-
* @description The configured color is applied when the
156-
* following visualization modes are set respectively:
180+
* @description The configured color is applied for all visible
181+
* visualization modes, overriding the color of the currently
182+
* selected mode.
183+
*
184+
* @param {string} clusterId - Id of the cluster to configure.
185+
* @param {number | string} color - The color to paint the cameras with.
186+
*
187+
* @example
188+
* ```js
189+
* spatialComponent.setCameraOverrideColor('my-cluster-id', 0x00ff00);
190+
* ```
191+
*/
192+
public setCameraOverrideColor(
193+
clusterId: string,
194+
color: number | string | null): void {
195+
this._scene.setCameraOverrideColor(clusterId, color);
196+
}
197+
198+
/**
199+
* Override the point color for a cluster.
157200
*
158-
* {@link CameraVisualizationMode.Manual}
159-
* {@link PointVisualizationMode.Manual}
201+
* @description The configured color is applied for all visible
202+
* visualization modes, overriding the color of the currently
203+
* selected mode.
160204
*
161205
* @param {string} clusterId - Id of the cluster to configure.
162-
* @param {number} color - The color to paint the cluster with.
206+
* @param {number | string} color - The color to paint the points with.
163207
*
164208
* @example
165209
* ```js
166-
* spatialComponent.configureClusterColor('my-cluster-id', 0x00ff00);
210+
* spatialComponent.setPointOverrideColor('my-cluster-id', 0x00ff00);
167211
* ```
168212
*/
169-
public configureClusterColor(
213+
public setPointOverrideColor(
170214
clusterId: string,
171-
color: number | string): void {
172-
this._scene.configureClusterColor(clusterId, color);
215+
color: number | string | null): void {
216+
this._scene.setPointOverrideColor(clusterId, color);
173217
}
174218

175219
protected _activate(): void {

0 commit comments

Comments
 (0)