@@ -31,7 +29,6 @@ const content = /* HTML */ `
* @internal
*/
export class GltfFloorControl extends Control {
- private _map: MapGL;
private _root: HTMLElement;
private _content: HTMLElement;
private _contentHome: HTMLElement;
@@ -41,7 +38,6 @@ export class GltfFloorControl extends Control {
constructor(map: MapGL, options: ControlOptions) {
super(map, content, options);
- this._map = map;
this._root = this._wrap.querySelector(`.${classes.root}`) as HTMLElement;
this._content = this._wrap.querySelector(`.${classes.content}`) as HTMLElement;
this._contentHome = this._wrap.querySelector(`.${classes.contentHome}`) as HTMLElement;
@@ -52,16 +48,16 @@ export class GltfFloorControl extends Control {
public show(options: ControlShowOptions) {
this._removeButtonsEventListeners();
- const { modelId, floorId, floorLevels = [] } = options;
+ const { buildingModelId, activeModelId, floorLevels = [] } = options;
- this._currentFloorId = createCompoundId(modelId, floorId);
+ this._currentFloorId = activeModelId;
this._root.style.display = 'block';
this._content.innerHTML = '';
this._contentHome.innerHTML = '';
let currentButton: HTMLElement | undefined;
- floorLevels.forEach(({ floorId, text, icon }) => {
- const rootContent = floorId === undefined ? this._contentHome : this._content;
+ floorLevels.forEach(({ modelId, text, icon }) => {
+ const rootContent = modelId === buildingModelId ? this._contentHome : this._content;
const button = document.createElement('button');
let buttonContent = text;
if (icon) {
@@ -75,14 +71,13 @@ export class GltfFloorControl extends Control {
}
button.className = classes.control;
button.innerHTML = `
${buttonContent}
`;
- const id = createCompoundId(modelId, floorId);
- button.name = id;
- if (this._currentFloorId === id) {
+ button.name = modelId;
+ if (this._currentFloorId === modelId) {
button.disabled = true;
currentButton = button;
}
- const handler = this._controlHandler(modelId, floorId);
+ const handler = this._controlHandler(modelId);
button.addEventListener('click', handler);
this._handlers.set(button, handler);
@@ -125,22 +120,19 @@ export class GltfFloorControl extends Control {
});
}
- private _controlHandler = (modelId: Id, floorId?: Id) => () => {
- this.switchCurrentFloorLevel(modelId, floorId);
+ private _controlHandler = (modelId: Id) => () => {
+ this._switchCurrentFloorLevel(modelId);
- this.emit('floorChange', {
+ this.emit('floorchange', {
modelId,
- floorId,
});
};
- public switchCurrentFloorLevel(modelId: Id, floorId?: Id) {
+ private _switchCurrentFloorLevel(modelId: Id) {
if (this._currentFloorId === undefined) {
return;
}
- const id = createCompoundId(modelId, floorId);
-
const buttonToDisabled: HTMLButtonElement | null = this._wrap.querySelector(
`.${classes.control}[name="${this._currentFloorId}"]`,
);
@@ -149,12 +141,12 @@ export class GltfFloorControl extends Control {
}
const buttonToEnabled: HTMLButtonElement | null = this._wrap.querySelector(
- `.${classes.control}[name="${id}"]`,
+ `.${classes.control}[name="${modelId}"]`,
);
if (buttonToEnabled) {
buttonToEnabled.disabled = true;
}
- this._currentFloorId = id;
+ this._currentFloorId = modelId;
}
}
diff --git a/src/control/types.ts b/src/control/types.ts
index 11bcdeb..453ce22 100644
--- a/src/control/types.ts
+++ b/src/control/types.ts
@@ -4,7 +4,7 @@ import { Id } from '../types/plugin';
* Floor level data
*/
export interface FloorLevel {
- floorId?: Id;
+ modelId: Id; // id модели этажа или здания
text: string;
icon?: 'parking' | 'building' | string;
}
@@ -13,8 +13,8 @@ export interface FloorLevel {
* Options for the method show
*/
export interface ControlShowOptions {
- modelId: Id;
- floorId?: Id;
+ buildingModelId: Id;
+ activeModelId: Id;
floorLevels?: FloorLevel[];
}
@@ -22,13 +22,12 @@ export interface ControlShowOptions {
* Event that emitted on button presses of the control
*/
export interface FloorChangeEvent {
- modelId: Id;
- floorId?: Id;
+ modelId: Id; // id модели этажа или здания
}
export interface ControlEventTable {
/**
* Emitted when floor's plan was changed
*/
- floorChange: FloorChangeEvent;
+ floorchange: FloorChangeEvent;
}
diff --git a/src/plugin.ts b/src/plugin.ts
index be0a459..bcf96f8 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -5,9 +5,11 @@ import type { Id, PluginOptions, ModelOptions, BuildingState } from './types/plu
import { applyOptionalDefaults } from './utils/common';
import { Evented } from './external/evented';
-// import { RealtyScene } from './realtyScene/realtyScene';
import { defaultOptions } from './defaultOptions';
import { concatUrl, isAbsoluteUrl } from './utils/url';
+import { createModelEventData } from './utils/events';
+import { RealtyScene } from './realtyScene/realtyScene';
+import { GROUND_COVERING_LAYER } from './constants';
interface Model {
instance: any; // GltfModel
@@ -26,7 +28,7 @@ export class GltfPlugin extends Evented
{
private map: MapGL;
private options: Required;
private models: Map;
- // private realtyScene?: RealtyScene;
+ private realtyScene?: RealtyScene;
/**
* The main class of the plugin
@@ -43,8 +45,8 @@ export class GltfPlugin extends Evented {
* modelId: '03a234cb',
* coordinates: [82.886554, 54.980988],
* modelUrl: 'models/cube_draco.glb',
- * rotateX: 90,
- * scale: 1000,
+ * rotateZ: 90,
+ * scale: 2,
* },
* ]);
* ```
@@ -57,8 +59,15 @@ export class GltfPlugin extends Evented {
this.map = map;
this.options = applyOptionalDefaults(pluginOptions ?? {}, defaultOptions);
this.models = new Map();
+
+ map.on('styleload', () => {
+ this.map.addLayer(GROUND_COVERING_LAYER); // мб унести отсюда в RealtyScene, нужно подумать
+ // this.poiGroups.onMapStyleUpdate();
+ });
}
+ // public destroy() {}
+
public setOptions(pluginOptions: Pick, 'groundCoveringColor'>) {
Object.keys(pluginOptions).forEach((option) => {
switch (option) {
@@ -71,8 +80,8 @@ export class GltfPlugin extends Evented {
});
}
- public async addModel(modelToLoad: ModelOptions, showOnLoad = true) {
- return this.addModels([modelToLoad], showOnLoad ? [modelToLoad.modelId] : []);
+ public async addModel(modelToLoad: ModelOptions, hideOnLoad = false) {
+ return this.addModels([modelToLoad], hideOnLoad ? [] : [modelToLoad.modelId]);
}
public async addModels(modelsToLoad: ModelOptions[], modelIdsToShow?: Id[]) {
@@ -123,6 +132,13 @@ export class GltfPlugin extends Evented {
return new Promise((resolve) => {
instance.once('modelloaded', () => resolve(model));
+ (['click', 'mousemove', 'mouseover', 'mouseout'] as const).forEach(
+ (eventType) => {
+ instance.on(eventType, (ev) => {
+ this.emit(eventType, createModelEventData(ev, options));
+ });
+ },
+ );
});
});
@@ -139,6 +155,10 @@ export class GltfPlugin extends Evented {
});
}
+ public isModelAdded(id: Id) {
+ return this.models.has(id);
+ }
+
public removeModel(id: Id) {
const model = this.models.get(id);
if (model) {
@@ -168,21 +188,16 @@ export class GltfPlugin extends Evented {
}
public async addRealtyScene(scene: BuildingOptions[], state?: BuildingState) {
- // this.realtyScene = new RealtyScene(
- // this,
- // this.map,
- // this.eventSource,
- // this.models,
- // this.options,
- // );
- // return this.realtyScene.add(scene, state);
+ this.realtyScene = new RealtyScene(this, this.map, this.options);
+ return this.realtyScene.init(scene, state);
}
- public removeRealtyScene(preserveCache?: boolean) {
- // if (!this.realtyScene) {
- // return;
- // }
- // this.realtyScene.destroy(preserveCache);
- // this.realtyScene = undefined;
+ // public showRealtyScene() {}
+
+ // public hideRealtyScene() {}
+
+ public removeRealtyScene() {
+ this.realtyScene?.destroy();
+ this.realtyScene = undefined;
}
}
diff --git a/src/realtyScene/realtyScene.ts b/src/realtyScene/realtyScene.ts
index 633d7da..f21f62f 100644
--- a/src/realtyScene/realtyScene.ts
+++ b/src/realtyScene/realtyScene.ts
@@ -1,663 +1,512 @@
-// import type { Map as MapGL, AnimationOptions, HtmlMarker, GeoJsonSource } from '@2gis/mapgl/types';
-
-// import { GltfPlugin } from '../plugin';
-// import { defaultOptions } from '../defaultOptions';
-// import { GltfFloorControl } from '../control';
-// import { clone, createCompoundId } from '../utils/common';
-// import classes from './realtyScene.module.css';
-
-// import type { Id, BuildingState, ModelOptions } from '../types/plugin';
-// import type {
-// BuildingOptions,
-// MapOptions,
-// BuildingFloorOptions,
-// PopupOptions,
-// } from '../types/realtyScene';
-// import type { ControlShowOptions, FloorLevel, FloorChangeEvent } from '../control/types';
-// import type {
-// GltfPluginModelEvent,
-// GltfPluginPoiEvent,
-// PoiGeoJsonProperties,
-// } from '../types/events';
-// import { GROUND_COVERING_LAYER, GROUND_COVERING_SOURCE_DATA, GROUND_COVERING_SOURCE_PURPOSE } from '../constants';
-
-// export class RealtyScene {
-// private activeBuilding?: BuildingOptions;
-// private activeModelId?: Id;
-// private control?: GltfFloorControl;
-// private activePoiGroupIds: Id[] = [];
-// private container: HTMLElement;
-// private buildingFacadeIds: Id[] = [];
-// // this field is needed when the highlighted
-// // model is placed under the floors' control
-// private prevHoveredModelId: Id | null = null;
-// private popup: HtmlMarker | null = null;
-// private scene: BuildingOptions[] | null = null;
-// private groundCoveringSource: GeoJsonSource;
-// private undergroundFloors = new Set();
-// private poiGroups: PoiGroups;
-
-// constructor(
-// private plugin: GltfPlugin,
-// private map: MapGL,
-// private eventSource: EventSource,
-// private models: Map,
-// private options: typeof defaultOptions,
-// ) {
-// this.poiGroups = new PoiGroups(this.map, this.options.poiConfig);
-// this.container = map.getContainer();
-// this.groundCoveringSource = new mapgl.GeoJsonSource(map, {
-// maxZoom: 2,
-// data: GROUND_COVERING_SOURCE_DATA,
-// attributes: {
-// purpose: GROUND_COVERING_SOURCE_PURPOSE,
-// },
-// });
-
-// map.on('styleload', () => {
-// this.map.addLayer(GROUND_COVERING_LAYER);
-// this.poiGroups.onMapStyleUpdate();})
-// }
-
-// public async add(scene: BuildingOptions[], originalState?: BuildingState) {
-// // make unique compound identifiers for floor's plans
-// let state = originalState === undefined ? originalState : clone(originalState);
-// this.makeUniqueFloorIds(scene);
-// if (state?.floorId !== undefined) {
-// state.floorId = createCompoundId(state.modelId, state.floorId);
-// }
-
-// // set initial fields
-// if (state !== undefined) {
-// this.activeBuilding = scene.find((model) => model.modelId === state?.modelId);
-// if (this.activeBuilding === undefined) {
-// throw new Error(
-// `There is no building's model with id ${state.modelId}. ` +
-// `Please check options of method addRealtyScene`,
-// );
-// }
-// this.activeModelId =
-// state.floorId !== undefined ? state.floorId : this.activeBuilding.modelId;
-// }
-
-// // initialize initial scene
-// const models: ModelOptions[] = [];
-// const modelIds: Id[] = [];
-// this.scene = scene;
-// scene.forEach((scenePart) => {
-// this.buildingFacadeIds.push(scenePart.modelId);
-// const modelOptions = getBuildingModelOptions(scenePart);
-// const floors = scenePart.floors ?? [];
-// let hasFloorByDefault = false;
-
-// for (let floor of floors) {
-// if (floor.isUnderground) {
-// this.undergroundFloors.add(floor.id);
-// }
-
-// if (state?.floorId !== undefined && floor.id === state.floorId) {
-// // for convenience push original building
-// models.push(modelOptions);
-// // push modified options for floor
-// models.push(getFloorModelOptions(floor, scenePart));
-// modelIds.push(floor.id);
-// hasFloorByDefault = true;
-// }
-// }
-
-// if (!hasFloorByDefault) {
-// models.push(modelOptions);
-// modelIds.push(scenePart.modelId);
-// }
-
-// if (this.options.modelsLoadStrategy === 'waitAll') {
-// for (let floor of floors) {
-// if (floor.id === state?.floorId) {
-// continue;
-// }
-// models.push(getFloorModelOptions(floor, scenePart));
-// }
-// }
-// });
-
-// // Leave only the underground floor's plan to be shown
-// if (state?.floorId !== undefined && this.undergroundFloors.has(state.floorId)) {
-// modelIds.length = 0;
-// modelIds.push(state.floorId);
-// }
-
-// return this.plugin.addModelsPartially(models, modelIds).then(() => {
-// // set options after adding models
-// if (state?.floorId !== undefined) {
-// const floors = this.activeBuilding?.floors ?? [];
-// const activeFloor = floors.find((floor) => floor.id === state?.floorId);
-// this.setMapOptions(activeFloor?.mapOptions);
-// this.addFloorPoi(activeFloor);
-// if (this.undergroundFloors.has(state.floorId)) {
-// this.switchOnGroundCovering();
-// }
-// } else {
-// this.setMapOptions(this.activeBuilding?.mapOptions);
-// }
-
-// // initialize floors' control
-// const { position } = this.options.floorsControl;
-// this.control = new GltfFloorControl(this.map, { position });
-// if (state !== undefined) {
-// const controlOptions = this.createControlOptions(scene, state);
-// this.control?.show(controlOptions);
-// if (state.floorId) {
-// this.eventSource.setCurrentFloorId(state.floorId);
-// }
-// }
-
-// // bind all events
-// this.bindRealtySceneEvents();
-// });
-// }
-
-// public resetGroundCoveringColor() {
-// const attrs = this.groundCoveringSource.getAttributes();
-// if ('color' in attrs) {
-// this.groundCoveringSource.setAttributes({
-// ...attrs,
-// color: this.options.groundCoveringColor,
-// });
-// }
-// }
-
-// public isUndergroundFloorShown() {
-// return this.activeModelId !== undefined && this.undergroundFloors.has(this.activeModelId);
-// }
-
-// public destroy(preserveCache?: boolean) {
-// this.unbindRealtySceneEvents();
-
-// this.plugin.removeModels(
-// this.scene?.reduce((agg, opts) => {
-// agg.push(opts.modelId);
-// opts.floors?.forEach((floor) => agg.push(floor.id));
-
-// return agg;
-// }, []) ?? [],
-// preserveCache,
-// );
-
-// this.clearPoiGroups();
-// this.eventSource.setCurrentFloorId(null);
-
-// this.groundCoveringSource.destroy();
-// this.undergroundFloors.clear();
-
-// this.control?.destroy();
-// this.control = undefined;
-
-// this.popup?.destroy();
-// this.popup = null;
-
-// this.activeBuilding = undefined;
-// this.activeModelId = undefined;
-// this.activePoiGroupIds = [];
-// this.buildingFacadeIds = [];
-// this.prevHoveredModelId = null;
-// this.scene = null;
-// }
-
-// private bindRealtySceneEvents() {
-// this.plugin.on('click', this.onSceneClick);
-// this.plugin.on('mouseover', this.onSceneMouseOver);
-// this.plugin.on('mouseout', this.onSceneMouseOut);
-
-// this.control?.on('floorChange', this.floorChangeHandler);
-// }
-
-// private unbindRealtySceneEvents() {
-// this.plugin.off('click', this.onSceneClick);
-// this.plugin.off('mouseover', this.onSceneMouseOver);
-// this.plugin.off('mouseout', this.onSceneMouseOut);
-
-// this.control?.off('floorChange', this.floorChangeHandler);
-// }
-
-// private createControlOptions(scene: BuildingOptions[], buildingState: BuildingState) {
-// const { modelId, floorId } = buildingState;
-// const options: ControlShowOptions = {
-// modelId: modelId,
-// };
-// if (floorId !== undefined) {
-// options.floorId = floorId;
-// }
-
-// const buildingData = scene.find((scenePart) => scenePart.modelId === modelId);
-// if (!buildingData) {
-// return options;
-// }
-
-// if (buildingData.floors !== undefined) {
-// const floorLevels: FloorLevel[] = [
-// {
-// icon: 'building',
-// text: '',
-// },
-// ];
-// buildingData.floors.forEach((floor) => {
-// floorLevels.push({
-// floorId: floor.id,
-// text: floor.text,
-// });
-// });
-// options.floorLevels = floorLevels;
-// }
-// return options;
-// }
-
-// private setMapOptions(options?: MapOptions) {
-// if (!options) {
-// return;
-// }
-
-// const animationOptions: AnimationOptions = {
-// easing: 'easeInSine',
-// duration: 500,
-// };
-// if (options.center) {
-// this.map.setCenter(options.center, animationOptions);
-// }
-// if (options.pitch) {
-// this.map.setPitch(options.pitch, animationOptions);
-// }
-// if (options.rotation) {
-// this.map.setRotation(options.rotation, animationOptions);
-// }
-// if (options.zoom) {
-// this.map.setZoom(options.zoom, animationOptions);
-// }
-// }
-
-// // checks if the modelId is external facade of the building
-// private isFacadeBuilding(modelId?: Id): modelId is Id {
-// if (modelId === undefined) {
-// return false;
-// }
-
-// return this.buildingFacadeIds.includes(modelId);
-// }
-
-// private getPopupOptions(modelId: Id): PopupOptions | undefined {
-// if (this.scene === null) {
-// return;
-// }
-// let building = this.scene.find((building) => building.modelId === modelId);
-// if (building === undefined) {
-// return;
-// }
-// return building.popupOptions;
-// }
-
-// private onSceneMouseOver = (ev: GltfPluginPoiEvent | GltfPluginModelEvent) => {
-// if (ev.target.type === 'model') {
-// const id = ev.target.modelId;
-// if (this.isFacadeBuilding(id)) {
-// this.container.style.cursor = 'pointer';
-// this.toggleHighlightModel(id);
-// let popupOptions = this.getPopupOptions(id);
-// if (popupOptions) {
-// this.showPopup(popupOptions);
-// }
-// }
-// }
-// };
-// private onSceneMouseOut = (ev: GltfPluginPoiEvent | GltfPluginModelEvent) => {
-// if (ev.target.type === 'model') {
-// const id = ev.target.modelId;
-// if (this.isFacadeBuilding(id)) {
-// this.container.style.cursor = '';
-// this.hidePopup();
-// if (this.prevHoveredModelId !== null) {
-// this.toggleHighlightModel(id);
-// }
-// }
-// }
-// };
-
-// private onSceneClick = (ev: GltfPluginPoiEvent | GltfPluginModelEvent) => {
-// if (this.scene === null) {
-// return;
-// }
-
-// if (ev.target.type === 'model') {
-// const id = ev.target.modelId;
-// if (this.isFacadeBuilding(id)) {
-// this.buildingClickHandler(this.scene, id);
-// }
-// }
-
-// if (ev.target.type === 'poi') {
-// this.poiClickHandler(ev.target.data);
-// }
-// };
-
-// private poiClickHandler = (data: PoiGeoJsonProperties) => {
-// const url: string | undefined = data.userData.url;
-// if (url !== undefined) {
-// const a = document.createElement('a');
-// a.setAttribute('href', url);
-// a.setAttribute('target', '_blank');
-// a.click();
-// }
-// };
-
-// private floorChangeHandler = (ev: FloorChangeEvent) => {
-// const model = this.activeBuilding;
-// if (model !== undefined && model.floors !== undefined) {
-// if (this.popup !== null) {
-// this.popup.destroy();
-// }
-
-// // click to the building button
-// if (ev.floorId === undefined) {
-// if (this.prevHoveredModelId !== null) {
-// this.toggleHighlightModel(this.prevHoveredModelId);
-// }
-
-// this.clearPoiGroups();
-// const modelsToAdd: ModelOptions[] = this.isUndergroundFloorShown()
-// ? (this.scene ?? []).map((scenePart) => getBuildingModelOptions(scenePart))
-// : [getBuildingModelOptions(model)];
-
-// this.plugin.addModels(modelsToAdd).then(() => {
-// if (this.activeModelId !== undefined) {
-// this.plugin.removeModel(this.activeModelId, true);
-// if (this.isUndergroundFloorShown()) {
-// this.switchOffGroundCovering();
-// }
-// }
-// this.setMapOptions(model?.mapOptions);
-// this.activeModelId = model.modelId;
-// });
-// }
-// // click to the floor button
-// if (ev.floorId !== undefined) {
-// const selectedFloor = model.floors.find((floor) => floor.id === ev.floorId);
-// if (selectedFloor !== undefined && this.activeModelId !== undefined) {
-// const selectedFloorModelOption = getFloorModelOptions(selectedFloor, model);
-
-// // In case of underground -> underground and ground -> ground transitions just switch floor's plan
-// if (this.isUndergroundFloorShown() === Boolean(selectedFloor.isUnderground)) {
-// this.plugin.addModel(selectedFloorModelOption).then(() => {
-// if (this.activeModelId !== undefined) {
-// this.plugin.removeModel(this.activeModelId, true);
-// }
-// this.addFloorPoi(selectedFloor);
-// });
-
-// return;
-// }
-
-// const modelsToAdd: ModelOptions[] = this.isUndergroundFloorShown()
-// ? (this.scene ?? [])
-// .filter((scenePart) => scenePart.modelId !== model.modelId)
-// .map((scenePart) => getBuildingModelOptions(scenePart))
-// : [];
-
-// modelsToAdd.push(selectedFloorModelOption);
-
-// const modelsToRemove = this.isUndergroundFloorShown()
-// ? []
-// : (this.scene ?? [])
-// .filter((scenePart) => scenePart.modelId !== model.modelId)
-// .map((scenePart) => scenePart.modelId);
-
-// modelsToRemove.push(this.activeModelId);
-
-// this.plugin.addModels(modelsToAdd).then(() => {
-// this.plugin.removeModels(modelsToRemove, true);
-// this.isUndergroundFloorShown()
-// ? this.switchOffGroundCovering()
-// : this.switchOnGroundCovering();
-// this.addFloorPoi(selectedFloor);
-// });
-// }
-// }
-// }
-// };
-
-// private buildingClickHandler = (scene: BuildingOptions[], modelId: Id) => {
-// const selectedBuilding = scene.find((model) => model.modelId === modelId);
-// if (selectedBuilding === undefined) {
-// return;
-// }
-
-// // don't show the pointer cursor on the model when user
-// // started to interact with the building
-// this.container.style.cursor = '';
-
-// if (this.popup !== null) {
-// this.popup.destroy();
-// }
-
-// // if there is a visible floor plan, then show the external
-// // facade of the active building before focusing on the new building
-// if (
-// this.activeBuilding &&
-// this.activeModelId &&
-// this.activeModelId !== this.activeBuilding?.modelId
-// ) {
-// // User is able to click on any other buildings as long as ground floor's plan is shown
-// // because when underground floor's plan is shown other buildings are hidden.
-// const oldId = this.activeModelId;
-// this.plugin.addModel(getBuildingModelOptions(this.activeBuilding)).then(() => {
-// this.clearPoiGroups();
-// this.plugin.removeModel(oldId, true);
-// });
-// }
-
-// // show the highest floor after a click on the building
-// const floors = selectedBuilding.floors ?? [];
-// if (floors.length !== 0) {
-// const floorOptions = floors[floors.length - 1];
-
-// const modelsToRemove = floorOptions.isUnderground
-// ? scene.map((scenePart) => scenePart.modelId)
-// : [selectedBuilding.modelId];
-
-// this.plugin.addModel(getFloorModelOptions(floorOptions, selectedBuilding)).then(() => {
-// this.plugin.removeModels(modelsToRemove, true);
-// if (floorOptions.isUnderground) {
-// this.switchOnGroundCovering();
-// }
-// this.addFloorPoi(floorOptions);
-// this.control?.switchCurrentFloorLevel(selectedBuilding.modelId, floorOptions.id);
-// });
-// } else {
-// this.activeModelId = selectedBuilding.modelId;
-// this.setMapOptions(selectedBuilding.mapOptions);
-// }
-
-// if (
-// this.activeBuilding === undefined ||
-// selectedBuilding.modelId !== this.activeBuilding?.modelId
-// ) {
-// // initialize control
-// const { position } = this.options.floorsControl;
-// this.control?.destroy();
-// this.control = new GltfFloorControl(this.map, { position });
-// const state = { modelId: selectedBuilding.modelId };
-// const controlOptions = this.createControlOptions(scene, state);
-// this.control?.show(controlOptions);
-// this.control.on('floorChange', (ev) => {
-// this.floorChangeHandler(ev);
-// });
-// }
-
-// this.activeBuilding = selectedBuilding;
-// };
-
-// private addFloorPoi(floorOptions?: BuildingFloorOptions) {
-// if (floorOptions === undefined) {
-// return;
-// }
-
-// this.activeModelId = floorOptions.id;
-
-// this.setMapOptions(floorOptions?.mapOptions);
-
-// this.clearPoiGroups();
-
-// floorOptions.poiGroups?.forEach((poiGroup) => {
-// if (this.activeBuilding?.modelId) {
-// this.plugin.addPoiGroup(poiGroup, {
-// modelId: this.activeBuilding?.modelId,
-// floorId: floorOptions.id,
-// });
-// this.activePoiGroupIds.push(poiGroup.id);
-// }
-// });
-// }
-
-// private clearPoiGroups() {
-// this.activePoiGroupIds.forEach((id) => {
-// this.plugin.removePoiGroup(id);
-// });
-
-// this.activePoiGroupIds = [];
-// }
-
-// /**
-// * Add the group of poi to the map
-// *
-// * @param options Options of the group of poi to add to the map
-// * @param state State of the active building to connect with added the group of poi
-// */
-// public async addPoiGroup(options: PoiGroupOptions, state?: BuildingState) {
-// this.poiGroups.add(options, state);
-// }
-
-// /**
-// * Remove the group of poi from the map
-// *
-// * @param id Identifier of the group of poi to remove
-// */
-// public removePoiGroup(id: Id) {
-// this.poiGroups.remove(id);
-// }
-
-// // TODO: Don't mutate scene data.
-// private makeUniqueFloorIds(scene: BuildingOptions[]) {
-// for (let scenePart of scene) {
-// const floors = scenePart.floors ?? [];
-// for (let floor of floors) {
-// if (!floor.id.toString().startsWith(scenePart.modelId.toString())) {
-// floor.id = createCompoundId(scenePart.modelId, floor.id);
-// }
-// }
-// }
-// }
-
-// public toggleHighlightModel(modelId: Id) {
-// // skip toggle if user is using default emissiveIntensity
-// // that means that model won't be hovered
-// const { intencity } = this.options.hoverHighlight;
-// if (intencity === 0) {
-// return;
-// }
-
-// const model = this.models.get(String(modelId));
-
-// if (model === undefined) {
-// return;
-// }
-
-// let shouldUnsetFlag = false;
-// model.traverse((obj) => {
-// if (obj instanceof THREE.Mesh) {
-// if (modelId === this.prevHoveredModelId) {
-// obj.material.emissiveIntensity = 0.0;
-// shouldUnsetFlag = true;
-// } else {
-// obj.material.emissiveIntensity = intencity;
-// }
-// }
-// });
-
-// this.prevHoveredModelId = shouldUnsetFlag ? null : modelId;
-// this.map.triggerRerender();
-// }
-
-// private showPopup(options: PopupOptions) {
-// this.popup = new mapgl.HtmlMarker(this.map, {
-// coordinates: options.coordinates,
-// html: this.getPopupHtml(options),
-// });
-// }
-
-// private hidePopup() {
-// if (this.popup !== null) {
-// this.popup.destroy();
-// this.popup = null;
-// }
-// }
-
-// private getPopupHtml(data: PopupOptions) {
-// if (data.description === undefined) {
-// return ``;
-// }
-
-// return ``;
-// }
-
-// private switchOffGroundCovering() {
-// const attrs = { ...this.groundCoveringSource.getAttributes() };
-// delete attrs['color'];
-// this.groundCoveringSource.setAttributes(attrs);
-// }
-
-// private switchOnGroundCovering() {
-// this.groundCoveringSource.setAttributes({
-// ...this.groundCoveringSource.getAttributes(),
-// color: this.options.groundCoveringColor,
-// });
-// }
-// }
-
-// function getBuildingModelOptions(building: BuildingOptions): ModelOptions {
-// return {
-// modelId: building.modelId,
-// coordinates: building.coordinates,
-// modelUrl: building.modelUrl,
-// rotateX: building.rotateX,
-// rotateY: building.rotateY,
-// rotateZ: building.rotateZ,
-// offsetX: building.offsetX,
-// offsetY: building.offsetY,
-// offsetZ: building.offsetZ,
-// scale: building.scale,
-// linkedIds: building.linkedIds,
-// interactive: building.interactive,
-// };
-// }
-
-// function getFloorModelOptions(
-// floor: BuildingFloorOptions,
-// building: BuildingOptions,
-// ): ModelOptions {
-// return {
-// modelId: floor.id,
-// coordinates: building.coordinates,
-// modelUrl: floor.modelUrl,
-// rotateX: building.rotateX,
-// rotateY: building.rotateY,
-// rotateZ: building.rotateZ,
-// offsetX: building.offsetX,
-// offsetY: building.offsetY,
-// offsetZ: building.offsetZ,
-// scale: building.scale,
-// linkedIds: building.linkedIds,
-// interactive: building.interactive,
-// };
-// }
+import type { Map as MapGL, AnimationOptions, HtmlMarker, GeoJsonSource } from '@2gis/mapgl/types';
+
+import { GltfPlugin } from '../plugin';
+import { GltfFloorControl } from '../control';
+import classes from './realtyScene.module.css';
+
+import type { BuildingState, Id, ModelOptions, PluginOptions } from '../types/plugin';
+import type {
+ BuildingOptions,
+ MapOptions,
+ BuildingFloorOptions,
+ PopupOptions,
+} from '../types/realtyScene';
+import type { FloorLevel, FloorChangeEvent } from '../control/types';
+import type { GltfPluginModelEvent, GltfPluginPoiEvent } from '../types/events';
+import { GROUND_COVERING_SOURCE_DATA, GROUND_COVERING_SOURCE_PURPOSE } from '../constants';
+
+interface RealtySceneState {
+ activeModelId?: Id;
+
+ // id здания мапится на опции здания или опции этажа этого здания
+ buildingVisibility: Map;
+}
+
+type BuildingOptionsInternal = Omit & {
+ floors: FloorLevel[];
+};
+type BuildingFloorOptionsInternal = BuildingFloorOptions & {
+ buildingOptions: ModelOptions;
+};
+
+export class RealtyScene {
+ private buildings = new Map();
+ private floors = new Map();
+ private undergroundFloors = new Set();
+ private state: RealtySceneState = {
+ activeModelId: undefined,
+ buildingVisibility: new Map(),
+ };
+
+ private groundCoveringSource: GeoJsonSource;
+ private control: GltfFloorControl;
+ private popup?: HtmlMarker;
+
+ // private poiGroups: PoiGroups;
+
+ constructor(
+ private plugin: GltfPlugin,
+ private map: MapGL,
+ private options: Required,
+ ) {
+ const { position } = this.options.floorsControl;
+ this.control = new GltfFloorControl(this.map, { position });
+ // this.poiGroups = new PoiGroups(this.map, this.options.poiConfig);
+ this.groundCoveringSource = new mapgl.GeoJsonSource(map, {
+ maxZoom: 2,
+ data: GROUND_COVERING_SOURCE_DATA,
+ attributes: {
+ purpose: GROUND_COVERING_SOURCE_PURPOSE,
+ },
+ });
+ }
+
+ private getBuildingModelId(id: Id | undefined) {
+ if (id === undefined) {
+ return;
+ }
+
+ if (this.buildings.has(id)) {
+ return id;
+ } else {
+ const floor = this.floors.get(id);
+ if (floor) {
+ return floor.buildingOptions.modelId;
+ }
+ }
+ }
+
+ private setState(newState: RealtySceneState) {
+ const prevState = this.state;
+
+ this.buildings.forEach((_, buildingId) => {
+ const prevModelOptions = prevState.buildingVisibility.get(buildingId);
+ const newModelOptions = newState.buildingVisibility.get(buildingId);
+ if (prevModelOptions) {
+ this.plugin.hideModel(prevModelOptions.modelId);
+ }
+
+ if (newModelOptions) {
+ this.plugin.isModelAdded(newModelOptions.modelId)
+ ? this.plugin.showModel(newModelOptions.modelId)
+ : this.plugin.addModel(newModelOptions);
+ }
+ });
+
+ if (prevState.activeModelId !== newState.activeModelId) {
+ if (
+ prevState.activeModelId !== undefined &&
+ this.undergroundFloors.has(prevState.activeModelId)
+ ) {
+ this.switchOffGroundCovering();
+ }
+
+ if (newState.activeModelId !== undefined) {
+ const options =
+ this.buildings.get(newState.activeModelId) ??
+ this.floors.get(newState.activeModelId);
+ if (options) {
+ this.setMapOptions(options.mapOptions);
+ // this.addFloorPoi(activeFloor);
+ // this.clearPoiGroups();
+ }
+
+ if (this.undergroundFloors.has(newState.activeModelId)) {
+ this.switchOnGroundCovering();
+ }
+ }
+ }
+
+ const prevBuildingModelId = this.getBuildingModelId(prevState.activeModelId);
+ const newBuildingModelId = this.getBuildingModelId(newState.activeModelId);
+
+ if (prevBuildingModelId !== newBuildingModelId) {
+ if (newBuildingModelId !== undefined && newState.activeModelId !== undefined) {
+ const buildingOptions = this.buildings.get(newBuildingModelId);
+ if (buildingOptions) {
+ this.control.show({
+ buildingModelId: buildingOptions.modelId,
+ activeModelId: newState.activeModelId,
+ floorLevels: [
+ {
+ modelId: buildingOptions.modelId,
+ icon: 'building',
+ text: '',
+ },
+ ...buildingOptions.floors,
+ ],
+ });
+ }
+ }
+ }
+
+ this.state = newState;
+ }
+
+ public async init(scene: BuildingOptions[], state?: BuildingState) {
+ // Приводим стейт пользователя к внутреннему виду id
+ let activeModelId: Id | undefined = state
+ ? state.floorId
+ ? getFloorModelId(state.buildingId, state.floorId)
+ : state.buildingId
+ : undefined;
+
+ scene.forEach((building) => {
+ const { floors, ...buildingPart } = building;
+ const internalBuilding: BuildingOptionsInternal = {
+ ...buildingPart,
+ floors: [],
+ };
+ const buildingOptions = getBuildingModelOptions(internalBuilding);
+
+ (floors ?? []).forEach((floor) => {
+ const floorModelId = getFloorModelId(building.modelId, floor.id);
+ internalBuilding.floors.push({
+ modelId: floorModelId,
+ text: floor.text,
+ icon: floor.icon,
+ });
+
+ this.floors.set(floorModelId, {
+ ...floor,
+ buildingOptions: buildingOptions,
+ });
+
+ if (floor.isUnderground) {
+ this.undergroundFloors.add(floorModelId);
+ }
+ });
+
+ this.buildings.set(building.modelId, internalBuilding);
+ });
+
+ // Оставляем только существующее значение из переданных modelId в scene
+ activeModelId =
+ activeModelId !== undefined &&
+ (this.buildings.has(activeModelId) || this.floors.has(activeModelId))
+ ? activeModelId
+ : undefined;
+
+ const modelsToLoad: Map = new Map();
+ const buildingVisibility: Map = new Map();
+
+ this.buildings.forEach((options, id) => {
+ const modelOptions = getBuildingModelOptions(options);
+ modelsToLoad.set(id, modelOptions);
+ buildingVisibility.set(id, modelOptions);
+ });
+
+ if (activeModelId) {
+ const floorOptions = this.floors.get(activeModelId);
+ if (floorOptions) {
+ if (this.undergroundFloors.has(activeModelId)) {
+ buildingVisibility.clear(); // показываем только подземный этаж
+ }
+
+ const modelOptions = getFloorModelOptions(floorOptions);
+ buildingVisibility.set(floorOptions.buildingOptions.modelId, modelOptions);
+ modelsToLoad.set(activeModelId, modelOptions);
+ }
+ }
+
+ if (this.options.modelsLoadStrategy === 'waitAll') {
+ this.floors.forEach((options, id) =>
+ modelsToLoad.set(id, getFloorModelOptions(options)),
+ );
+ }
+
+ return this.plugin
+ .addModels(Array.from(modelsToLoad.values()), Array.from(buildingVisibility.keys()))
+ .then(() => {
+ this.setState({
+ activeModelId,
+ buildingVisibility,
+ });
+
+ this.plugin.on('click', this.onSceneClick);
+ this.plugin.on('mouseover', this.onSceneMouseOver);
+ this.plugin.on('mouseout', this.onSceneMouseOut);
+ this.control.on('floorchange', this.floorChangeHandler);
+ });
+ }
+
+ public resetGroundCoveringColor() {
+ const attrs = this.groundCoveringSource.getAttributes();
+ if ('color' in attrs) {
+ this.groundCoveringSource.setAttributes({
+ ...attrs,
+ color: this.options.groundCoveringColor,
+ });
+ }
+ }
+
+ public destroy() {
+ this.plugin.off('click', this.onSceneClick);
+ this.plugin.off('mouseover', this.onSceneMouseOver);
+ this.plugin.off('mouseout', this.onSceneMouseOut);
+ this.control.off('floorchange', this.floorChangeHandler);
+
+ this.plugin.removeModels([...this.buildings.keys(), ...this.floors.keys()]);
+
+ // this.clearPoiGroups();
+
+ this.groundCoveringSource.destroy();
+ this.undergroundFloors.clear();
+
+ this.control.destroy();
+
+ this.popup?.destroy();
+ this.popup = undefined;
+
+ this.state.activeModelId = undefined;
+ this.state.buildingVisibility.clear();
+ this.buildings.clear();
+ this.floors.clear();
+ }
+
+ private setMapOptions(options?: MapOptions) {
+ if (!options) {
+ return;
+ }
+
+ const animationOptions: AnimationOptions = {
+ easing: 'easeInSine',
+ duration: 500,
+ };
+
+ if (options.center) {
+ this.map.setCenter(options.center, animationOptions);
+ }
+ if (options.pitch) {
+ this.map.setPitch(options.pitch, animationOptions);
+ }
+ if (options.rotation) {
+ this.map.setRotation(options.rotation, animationOptions);
+ }
+ if (options.zoom) {
+ this.map.setZoom(options.zoom, animationOptions);
+ }
+ }
+
+ private onSceneMouseOut = (ev: GltfPluginPoiEvent | GltfPluginModelEvent) => {
+ if (ev.target.type !== 'model') {
+ return;
+ }
+
+ this.popup?.destroy();
+ };
+
+ private onSceneMouseOver = ({ target }: GltfPluginPoiEvent | GltfPluginModelEvent) => {
+ if (target.type === 'poi' || target.modelId === undefined) {
+ return;
+ }
+
+ const options = this.buildings.get(target.modelId);
+ if (!options || !options.popupOptions) {
+ return;
+ }
+
+ this.popup = new mapgl.HtmlMarker(this.map, {
+ coordinates: options.popupOptions.coordinates,
+ html: getPopupHtml(options.popupOptions),
+ interactive: false,
+ });
+ };
+
+ private onSceneClick = ({ target }: GltfPluginPoiEvent | GltfPluginModelEvent) => {
+ if (target.type === 'model') {
+ const options = this.buildings.get(target.modelId);
+ if (options) {
+ this.buildingClickHandler(target.modelId);
+ }
+ } else if (target.type === 'poi') {
+ const userData = target.data.userData;
+ if (isObject(userData) && typeof userData.url === 'string') {
+ const a = document.createElement('a');
+ a.setAttribute('href', userData.url);
+ a.setAttribute('target', '_blank');
+ a.click();
+ }
+ }
+ };
+
+ private floorChangeHandler = (ev: FloorChangeEvent) => {
+ const buildingVisibility: Map = new Map();
+ this.buildings.forEach((options, id) => {
+ buildingVisibility.set(id, getBuildingModelOptions(options));
+ });
+ const buildingOptions = this.buildings.get(ev.modelId);
+ if (buildingOptions) {
+ this.setState({
+ activeModelId: ev.modelId,
+ buildingVisibility,
+ });
+ return;
+ }
+
+ const floorOptions = this.floors.get(ev.modelId);
+ if (floorOptions) {
+ if (this.undergroundFloors.has(ev.modelId)) {
+ buildingVisibility.clear();
+ }
+ buildingVisibility.set(
+ floorOptions.buildingOptions.modelId,
+ getFloorModelOptions(floorOptions),
+ );
+ this.setState({
+ activeModelId: ev.modelId,
+ buildingVisibility,
+ });
+ return;
+ }
+ };
+
+ private buildingClickHandler = (modelId: Id) => {
+ const buildingOptions = this.buildings.get(modelId);
+ if (!buildingOptions) {
+ return;
+ }
+
+ let activeModelId = modelId;
+ const buildingVisibility: Map = new Map();
+ this.buildings.forEach((options, id) => {
+ buildingVisibility.set(id, getBuildingModelOptions(options));
+ });
+
+ // показываем самый высокий этаж здания после клика
+ const floors = buildingOptions.floors ?? [];
+ if (floors.length) {
+ const { modelId: floorModelId } = floors[floors.length - 1];
+ const floorOptions = this.floors.get(floorModelId);
+ if (floorOptions) {
+ activeModelId = floorModelId;
+ if (this.undergroundFloors.has(floorModelId)) {
+ buildingVisibility.clear();
+ }
+ buildingVisibility.set(
+ floorOptions.buildingOptions.modelId,
+ getFloorModelOptions(floorOptions),
+ );
+ }
+ }
+
+ this.setState({
+ buildingVisibility,
+ activeModelId,
+ });
+ };
+
+ // private addFloorPoi(floorOptions?: BuildingFloorOptions) {
+ // if (floorOptions === undefined) {
+ // return;
+ // }
+
+ // this.activeModelId = floorOptions.id;
+
+ // this.setMapOptions(floorOptions?.mapOptions);
+
+ // this.clearPoiGroups();
+
+ // floorOptions.poiGroups?.forEach((poiGroup) => {
+ // if (this.activeBuilding?.modelId) {
+ // this.plugin.addPoiGroup(poiGroup, {
+ // modelId: this.activeBuilding?.modelId,
+ // floorId: floorOptions.id,
+ // });
+ // this.activePoiGroupIds.push(poiGroup.id);
+ // }
+ // });
+ // }
+
+ // private clearPoiGroups() {
+ // this.activePoiGroupIds.forEach((id) => {
+ // this.plugin.removePoiGroup(id);
+ // });
+
+ // this.activePoiGroupIds = [];
+ // }
+
+ // /**
+ // * Add the group of poi to the map
+ // *
+ // * @param options Options of the group of poi to add to the map
+ // * @param state State of the active building to connect with added the group of poi
+ // */
+ // public async addPoiGroup(options: PoiGroupOptions, state?: BuildingState) {
+ // this.poiGroups.add(options, state);
+ // }
+
+ // /**
+ // * Remove the group of poi from the map
+ // *
+ // * @param id Identifier of the group of poi to remove
+ // */
+ // public removePoiGroup(id: Id) {
+ // this.poiGroups.remove(id);
+ // }
+
+ private switchOffGroundCovering() {
+ const attrs = { ...this.groundCoveringSource.getAttributes() };
+ delete attrs['color'];
+ this.groundCoveringSource.setAttributes(attrs);
+ }
+
+ private switchOnGroundCovering() {
+ this.groundCoveringSource.setAttributes({
+ ...this.groundCoveringSource.getAttributes(),
+ color: this.options.groundCoveringColor,
+ });
+ }
+}
+
+function getBuildingModelOptions(building: BuildingOptionsInternal): ModelOptions {
+ return {
+ modelId: building.modelId,
+ coordinates: building.coordinates,
+ modelUrl: building.modelUrl,
+ rotateX: building.rotateX,
+ rotateY: building.rotateY,
+ rotateZ: building.rotateZ,
+ offsetX: building.offsetX,
+ offsetY: building.offsetY,
+ offsetZ: building.offsetZ,
+ scale: building.scale,
+ linkedIds: building.linkedIds,
+ interactive: building.interactive,
+ };
+}
+
+function getFloorModelOptions({
+ buildingOptions,
+ id,
+ modelUrl,
+}: BuildingFloorOptionsInternal): ModelOptions {
+ return {
+ modelId: getFloorModelId(buildingOptions.modelId, id),
+ coordinates: buildingOptions.coordinates,
+ modelUrl,
+ rotateX: buildingOptions.rotateX,
+ rotateY: buildingOptions.rotateY,
+ rotateZ: buildingOptions.rotateZ,
+ offsetX: buildingOptions.offsetX,
+ offsetY: buildingOptions.offsetY,
+ offsetZ: buildingOptions.offsetZ,
+ scale: buildingOptions.scale,
+ linkedIds: buildingOptions.linkedIds,
+ interactive: buildingOptions.interactive,
+ };
+}
+
+function getFloorModelId(buildingModelId: string, floorId: string) {
+ return `${buildingModelId}_${floorId}`;
+}
+
+const getPopupHtml = ({ description, title }: PopupOptions) =>
+ ``;
+
+function isObject(value: unknown): value is Record {
+ return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
diff --git a/src/types/events.ts b/src/types/events.ts
index 2d68965..6db4834 100644
--- a/src/types/events.ts
+++ b/src/types/events.ts
@@ -29,14 +29,9 @@ export interface ModelTarget {
data: ModelOptions;
/**
- * Identifier of the building's model
+ * Identifier of the building's or floor's model
*/
- modelId?: Id;
-
- /**
- * Identifier of the current floor
- */
- floorId?: Id;
+ modelId: Id;
}
export interface PoiTarget {
diff --git a/src/types/plugin.ts b/src/types/plugin.ts
index f389391..9dacf36 100644
--- a/src/types/plugin.ts
+++ b/src/types/plugin.ts
@@ -1,4 +1,4 @@
-export type Id = string | number;
+export type Id = string;
export type ColorModelString = `${'rgb' | 'hsl'}(${string})`;
export type HexColorString = `#${string}`;
@@ -110,12 +110,12 @@ export interface BuildingState {
/**
* Identifier of the building's model
*/
- modelId: Id;
+ buildingId: string;
/**
* Identifier of the floor's model
*/
- floorId?: Id;
+ floorId?: string;
}
/**
diff --git a/src/utils/common.ts b/src/utils/common.ts
index f5b4c55..c9f3f74 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -4,17 +4,6 @@ export function clamp(value: number, min: number, max: number): number {
return value;
}
-export function clone(obj: T): T {
- return JSON.parse(JSON.stringify(obj));
-}
-
-export function createCompoundId(modelId: string | number, floorId?: string | number) {
- if (floorId === undefined) {
- return String(modelId);
- }
- return `${modelId}_${floorId}`;
-}
-
export type RequiredExcept = T & Required>;
type RequiredOptional = Exclude<
diff --git a/src/utils/events.ts b/src/utils/events.ts
new file mode 100644
index 0000000..acab555
--- /dev/null
+++ b/src/utils/events.ts
@@ -0,0 +1,16 @@
+import { MapPointerEvent } from '@2gis/mapgl/types';
+import { GltfPluginModelEvent, Id, ModelOptions, ModelTarget } from '../types';
+
+export const createModelEventData = (
+ ev: MapPointerEvent,
+ data: ModelOptions,
+): GltfPluginModelEvent => ({
+ originalEvent: ev.originalEvent,
+ point: ev.point,
+ lngLat: ev.lngLat,
+ target: {
+ type: 'model',
+ modelId: data.modelId,
+ data,
+ },
+});