Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Realty Scene refactoring #32

Merged
merged 3 commits into from
Mar 1, 2024
Merged

Realty Scene refactoring #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e6422bc
wip
alxart Feb 27, 2024
6b280a9
some improvements
alxart Feb 28, 2024
3743694
bring state back
alxart Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 5 additions & 18 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,12 @@
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

body {
padding: 12px;
}

body,
#container {
height: 400px;
width: 800px;
}

#stats {
background-color: rgba(255, 255, 255, 0.8);
max-width: 100%;
overflow-y: auto;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
Expand Down
12 changes: 7 additions & 5 deletions demo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ async function start() {

const map = new mapglAPI.Map('container', {
center: [47.245286302641034, 56.134743473834099],
zoom: 17.9,
zoom: 18.9,
key: 'cb20c5bf-34d3-4f0e-9b2b-33e9b8edb57f',
pitch: 45,
rotation: 330,
Expand All @@ -20,7 +20,7 @@ async function start() {
(window as any).map = map;

const plugin = new GltfPlugin(map, {
modelsLoadStrategy: 'dontWaitAll',
modelsLoadStrategy: 'waitAll',
modelsBaseUrl: 'https://disk.2gis.com/digital-twin/models_s3/realty_ads/zgktechnology/',
floorsControl: { position: 'centerRight' },
poiConfig: {
Expand All @@ -34,7 +34,7 @@ async function start() {
hoverHighlight: {
intencity: 0.1,
},
groundCoveringColor: 'rgba(233, 232, 220, 0.8)',
groundCoveringColor: 'rgba(0, 0, 0, 0.8)',
});

(window as any).gltfPlugin = plugin;
Expand All @@ -46,7 +46,7 @@ async function start() {
.getContainer()
.addEventListener('click', () => {
plugin.removeRealtyScene();
plugin.addRealtyScene(REALTY_SCENE, { modelId: '03a234cb', floorId: '235034' });
plugin.addRealtyScene(REALTY_SCENE);
});

new mapglAPI.Control(map, '<button>Remove Scene</button>', {
Expand All @@ -63,7 +63,9 @@ async function start() {
.getContainer()
.addEventListener('click', () => {
plugin.removeRealtyScene();
plugin.addRealtyScene(REALTY_SCENE_1, { modelId: 'ds321ba234cb' });
plugin.addRealtyScene(REALTY_SCENE_1, {
buildingId: 'ds321ba234cb',
});
});

new mapglAPI.Control(map, '<button>Remove Scene 1</button>', {
Expand Down
24 changes: 13 additions & 11 deletions demo/mocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ export const REALTY_SCENE: BuildingOptions[] = [
modelUrl: 'zgktechnology1.glb',
rotateZ: -15.1240072739039,
linkedIds: ['70030076555823021'],
interactive: true,
mapOptions: {
center: [47.24547737708662, 56.134591508663135],
pitch: 40,
zoom: 19,
rotation: -41.4,
},
popupOptions: {
coordinates: [47.24511721603574, 56.13451456056651],
coordinates: [47.24498128610925, 56.13451011334241],
title: 'Корпус 1. 11 этажей',
description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
},
Expand All @@ -29,9 +30,10 @@ export const REALTY_SCENE: BuildingOptions[] = [
zoom: 20,
rotation: -57.5,
},
isUnderground: true,
poiGroups: [
{
id: 1111,
id: '1111',
type: 'primary',
minZoom: 19.5,
elevation: 5,
Expand Down Expand Up @@ -81,7 +83,6 @@ export const REALTY_SCENE: BuildingOptions[] = [
id: '000034',
text: '11',
modelUrl: 'zgktechnology1_floor11.glb',
isUnderground: true,
mapOptions: {
center: [47.24556663327373, 56.13456998211929],
pitch: 40,
Expand All @@ -90,7 +91,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
},
poiGroups: [
{
id: 1111,
id: '1111',
type: 'primary',
minZoom: 19,
elevation: 35,
Expand Down Expand Up @@ -142,8 +143,9 @@ export const REALTY_SCENE: BuildingOptions[] = [
modelId: '1ba234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'zgktechnology2.glb',
rotateY: -15.1240072739039,
rotateZ: -15.1240072739039,
linkedIds: ['70030076555821177'],
interactive: true,
mapOptions: {
center: [47.245008950283065, 56.1344698491912],
pitch: 45,
Expand All @@ -160,7 +162,6 @@ export const REALTY_SCENE: BuildingOptions[] = [
id: 'aaa777',
text: '2-15',
modelUrl: 'zgktechnology2_floor2.glb',
isUnderground: true,
mapOptions: {
center: [47.24463456947374, 56.134675042798094],
pitch: 35,
Expand All @@ -169,7 +170,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
},
poiGroups: [
{
id: 1111,
id: '1111',
type: 'primary',
minZoom: 19.7,
elevation: 7,
Expand Down Expand Up @@ -255,7 +256,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
},
poiGroups: [
{
id: 1111,
id: '1111',
type: 'primary',
minZoom: 18.9,
elevation: 53,
Expand Down Expand Up @@ -335,7 +336,7 @@ export const REALTY_SCENE: BuildingOptions[] = [
modelId: 'eda234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'zgktechnology_construction.glb',
rotateY: -15.1240072739039,
rotateZ: -15.1240072739039,
linkedIds: ['70030076561388553'],
interactive: false,
},
Expand All @@ -346,8 +347,9 @@ export const REALTY_SCENE_1: BuildingOptions[] = [
modelId: 'ds321ba234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'zgktechnology2.glb',
rotateY: -15.1240072739039,
rotateZ: -15.1240072739039,
linkedIds: ['70030076555823021', '70030076555821177', '70030076555823021'],
interactive: true,
mapOptions: {
center: [47.245008950283065, 56.1344698491912],
pitch: 45,
Expand Down Expand Up @@ -388,7 +390,7 @@ export const REALTY_SCENE_1: BuildingOptions[] = [
modelId: '345feda234cb',
coordinates: [47.245286302641034, 56.134743473834099],
modelUrl: 'zgktechnology_construction.glb',
rotateY: -15.1240072739039,
rotateZ: -15.1240072739039,
linkedIds: ['70030076561388553'],
interactive: false,
},
Expand Down
40 changes: 16 additions & 24 deletions src/control/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import type { Map as MapGL, ControlOptions } from '@2gis/mapgl/types';

import type { Id } from '../types/plugin';
import type { ControlShowOptions } from './types';
import type { ControlShowOptions, FloorLevel } from './types';

import icon_building from 'raw-loader!./icon_building.svg';
import icon_parking from 'raw-loader!./icon_parking.svg';
import { Control } from './control';
import classes from './control.module.css';
import { createCompoundId } from '../utils/common';
import { Control } from './control';
import { Id } from '../types';

const content = /* HTML */ `
<div class="${classes.root}">
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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) {
Expand All @@ -75,14 +71,13 @@ export class GltfFloorControl extends Control {
}
button.className = classes.control;
button.innerHTML = `<div class="${classes.label}">${buttonContent}</div>`;
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);
Expand Down Expand Up @@ -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}"]`,
);
Expand All @@ -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;
}
}
11 changes: 5 additions & 6 deletions src/control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -13,22 +13,21 @@ export interface FloorLevel {
* Options for the method show
*/
export interface ControlShowOptions {
modelId: Id;
floorId?: Id;
buildingModelId: Id;
activeModelId: Id;
floorLevels?: FloorLevel[];
}

/**
* 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;
}
Loading
Loading