hart-estate-widget 0.0.47 → 0.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/assets/css/app.css +1 -1
- package/build/assets/css/app.css.map +1 -1
- package/build/components/Application.js +41 -24
- package/build/components/Buttons/FullScreenButton.js +7 -3
- package/build/components/Buttons/TabButton.js +4 -6
- package/build/components/ImageTab.js +3 -5
- package/build/components/Instructions.js +15 -13
- package/build/components/Loader.js +4 -5
- package/build/components/ModelTab.js +89 -54
- package/build/components/PanoramaTab.js +234 -176
- package/build/components/RotationTab.js +71 -32
- package/build/components/Widget.js +43 -27
- package/build/config/defaultConfig.js +1 -1
- package/build/enums/deviceOrientationStatus.js +1 -1
- package/build/enums/imageExtentions.js +6 -11
- package/build/index.js +6 -6
- package/build/store/apiStore.js +177 -40
- package/build/store/fullScreenStore.js +90 -20
- package/build/store/houseStore.js +792 -693
- package/build/store/index.js +70 -44
- package/build/store/modelStore.js +194 -141
- package/build/threesixty/events.js +92 -71
- package/build/threesixty/index.js +138 -112
- package/build/utils/csg/csg-lib.js +383 -298
- package/build/utils/csg/csg-worker.js +23 -33
- package/build/utils/csg/three-csg.js +103 -106
- package/build/utils/modelHelpers.js +46 -40
- package/build/utils/panoramaHelpers.js +48 -32
- package/package.json +6 -14
@@ -1,26 +1,12 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
6
8
|
exports.default = void 0;
|
7
9
|
|
8
|
-
require("core-js/modules/es.array.reduce.js");
|
9
|
-
|
10
|
-
require("core-js/modules/es.regexp.exec.js");
|
11
|
-
|
12
|
-
require("core-js/modules/es.string.split.js");
|
13
|
-
|
14
|
-
require("core-js/modules/es.string.includes.js");
|
15
|
-
|
16
|
-
require("core-js/modules/web.dom-collections.iterator.js");
|
17
|
-
|
18
|
-
require("core-js/modules/es.regexp.to-string.js");
|
19
|
-
|
20
|
-
require("core-js/modules/es.array.flat.js");
|
21
|
-
|
22
|
-
require("core-js/modules/es.array.unscopables.flat.js");
|
23
|
-
|
24
10
|
var _react = _interopRequireWildcard(require("react"));
|
25
11
|
|
26
12
|
var _store = _interopRequireDefault(require("../store"));
|
@@ -63,84 +49,105 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
63
49
|
|
64
50
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
65
51
|
|
66
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null ||
|
52
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
53
|
+
|
54
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
55
|
+
|
56
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
67
57
|
|
68
|
-
|
58
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
59
|
+
|
60
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
61
|
+
|
62
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
63
|
+
|
64
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
65
|
+
|
66
|
+
var instructionSteps = [{
|
69
67
|
icon: _handMove.default,
|
70
68
|
text: 'Вращать планировку'
|
71
69
|
}, {
|
72
70
|
icon: _handResearch.default,
|
73
71
|
text: 'Исследовать планировку'
|
74
72
|
}];
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
const cameraFovValues = {
|
73
|
+
var _PANOLENS$CONTROLS = PANOLENS.CONTROLS,
|
74
|
+
DEVICEORIENTATION = _PANOLENS$CONTROLS.DEVICEORIENTATION,
|
75
|
+
ORBIT = _PANOLENS$CONTROLS.ORBIT;
|
76
|
+
var pathName = 'Panorama_0_0_';
|
77
|
+
var cameraFovValues = {
|
81
78
|
x1: 90,
|
82
79
|
x2: 60
|
83
80
|
};
|
84
81
|
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
82
|
+
var getDefaultUserData = function getDefaultUserData() {
|
83
|
+
return {
|
84
|
+
left: 0,
|
85
|
+
top: 0,
|
86
|
+
points: []
|
87
|
+
};
|
88
|
+
};
|
90
89
|
|
91
|
-
|
92
|
-
|
90
|
+
var createPanorama = function createPanorama(image, index, setLoadingState) {
|
91
|
+
var panorama = new PANOLENS.ImagePanorama(image);
|
93
92
|
panorama.userData = getDefaultUserData();
|
94
93
|
panorama['panorama_id'] = index + 1;
|
95
|
-
panorama.addEventListener('progress', event
|
94
|
+
panorama.addEventListener('progress', function (event) {
|
96
95
|
setLoadingState(true);
|
97
96
|
|
98
97
|
if (event.progress.loaded / event.progress.total * 100 === 100) {
|
99
98
|
setLoadingState(false);
|
100
99
|
}
|
101
100
|
});
|
102
|
-
panorama.addEventListener('enter', ()
|
101
|
+
panorama.addEventListener('enter', function () {
|
102
|
+
return setLoadingState(false);
|
103
|
+
});
|
103
104
|
return panorama;
|
104
105
|
};
|
105
106
|
|
106
|
-
|
107
|
-
if (!json) return images.map((image, index)
|
108
|
-
|
109
|
-
|
110
|
-
|
107
|
+
var getPanoramas = function getPanoramas(json, images, setLoadingState) {
|
108
|
+
if (!json) return images.map(function (image, index) {
|
109
|
+
return createPanorama(image, index, setLoadingState);
|
110
|
+
});
|
111
|
+
var panoramas = json.Floors[0].Units[0].Rooms.reduce(function (acc, jsonRoom, index) {
|
112
|
+
var roomImages = images.filter(function (img) {
|
113
|
+
var panoramaIdIndex = img.indexOf(pathName) + pathName.length;
|
111
114
|
if (panoramaIdIndex < pathName.length) return false;
|
112
|
-
|
113
|
-
|
115
|
+
var indexAsString = String(index);
|
116
|
+
var panoramaId = String((0, _imageExtentions.removeExtention)(img.substring(panoramaIdIndex))).split('.')[0];
|
114
117
|
|
115
118
|
if (panoramaId.includes(_panoramaHelpers.cameraIdBeginning)) {
|
116
|
-
|
119
|
+
var cameraIdIndex = panoramaId.indexOf(_panoramaHelpers.cameraIdBeginning) - 1;
|
117
120
|
panoramaId = panoramaId.slice(0, cameraIdIndex);
|
118
121
|
}
|
119
122
|
|
120
|
-
|
121
|
-
|
123
|
+
var maxIndexLength = Math.max(indexAsString.length, panoramaId.length);
|
124
|
+
var imageInRoom = (0, _panoramaHelpers.getArrayFromNumber)(maxIndexLength).every(function (i) {
|
122
125
|
return panoramaId[i] === indexAsString[i];
|
123
126
|
});
|
124
127
|
return imageInRoom;
|
125
128
|
});
|
126
129
|
if (!roomImages.length) return acc;
|
127
|
-
roomImages.forEach(image
|
128
|
-
|
130
|
+
roomImages.forEach(function (image) {
|
131
|
+
var panorama = createPanorama(image, index, setLoadingState);
|
129
132
|
panorama['room_images'] = roomImages;
|
130
133
|
panorama['room_id'] = jsonRoom.ID;
|
131
|
-
|
132
|
-
|
134
|
+
var roomPoints = (0, _panoramaHelpers.getRoomCoordinates)(jsonRoom, json.Floors[0].Walls, json.Vertices);
|
135
|
+
|
136
|
+
var _polygonMean = (0, _geometric.polygonMean)(roomPoints),
|
137
|
+
_polygonMean2 = _slicedToArray(_polygonMean, 2),
|
138
|
+
left = _polygonMean2[0],
|
139
|
+
top = _polygonMean2[1];
|
133
140
|
|
134
141
|
if (!panorama.linkedSpots.length) {
|
135
142
|
if (panorama.src.includes('_CameraId')) {
|
136
|
-
|
143
|
+
var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, panorama.src);
|
137
144
|
left = currentCamera.Location.X;
|
138
145
|
top = currentCamera.Location.Y;
|
139
146
|
}
|
140
147
|
|
141
148
|
panorama.userData = {
|
142
|
-
left,
|
143
|
-
top,
|
149
|
+
left: left,
|
150
|
+
top: top,
|
144
151
|
points: roomPoints
|
145
152
|
};
|
146
153
|
}
|
@@ -153,9 +160,11 @@ const getPanoramas = (json, images, setLoadingState) => {
|
|
153
160
|
});
|
154
161
|
return acc;
|
155
162
|
}, []);
|
156
|
-
return panoramas.map((panorama, index)
|
163
|
+
return panoramas.map(function (panorama, index) {
|
157
164
|
panorama['panorama_index'] = index;
|
158
|
-
|
165
|
+
var currentRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
|
166
|
+
return room.ID === panorama['room_id'];
|
167
|
+
});
|
159
168
|
|
160
169
|
if (!panorama.linkedSpots.length) {
|
161
170
|
return setPanoramaLinks(json, currentRoom, panorama, panoramas);
|
@@ -165,128 +174,167 @@ const getPanoramas = (json, images, setLoadingState) => {
|
|
165
174
|
});
|
166
175
|
};
|
167
176
|
|
168
|
-
|
169
|
-
|
170
|
-
panorama['room_images'].forEach(image
|
177
|
+
var setPanoramaLinks = function setPanoramaLinks(json, currentRoom, panorama, panoramas) {
|
178
|
+
var center = [panorama.userData.left, panorama.userData.top];
|
179
|
+
panorama['room_images'].forEach(function (image) {
|
171
180
|
if (image === panorama.src) return;
|
172
|
-
|
173
|
-
|
174
|
-
src
|
175
|
-
} = _ref;
|
181
|
+
var connectedPanorama = panoramas.find(function (_ref) {
|
182
|
+
var src = _ref.src;
|
176
183
|
return src === image;
|
177
184
|
});
|
178
|
-
|
185
|
+
var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
|
179
186
|
if (!currentCamera) return;
|
180
187
|
connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
|
181
188
|
});
|
182
|
-
json.Floors[0].Doors.forEach(_ref2
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
189
|
+
json.Floors[0].Doors.forEach(function (_ref2) {
|
190
|
+
var Location = _ref2.Location,
|
191
|
+
Walls = _ref2.Walls;
|
192
|
+
if (!Walls.some(function (doorWallId) {
|
193
|
+
return currentRoom.Walls.some(function (roomWallId) {
|
194
|
+
return roomWallId === doorWallId;
|
195
|
+
});
|
196
|
+
})) return;
|
197
|
+
var connectedRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
|
198
|
+
var roomHasSameWall = room.Walls.some(function (roomWallId) {
|
199
|
+
return Walls.some(function (doorWallId) {
|
200
|
+
return roomWallId === doorWallId;
|
201
|
+
});
|
202
|
+
});
|
203
|
+
var isSameRoom = room.ID === currentRoom.ID;
|
191
204
|
return roomHasSameWall && !isSameRoom;
|
192
205
|
});
|
193
206
|
if (!connectedRoom) return;
|
194
|
-
|
195
|
-
|
196
|
-
room_id
|
197
|
-
} = _ref3;
|
207
|
+
var availablePanoramas = panoramas.filter(function (_ref3) {
|
208
|
+
var room_id = _ref3.room_id;
|
198
209
|
return room_id === connectedRoom.ID;
|
199
210
|
});
|
200
|
-
|
201
|
-
|
202
|
-
|
211
|
+
|
212
|
+
var _getClosestPanorama = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas),
|
213
|
+
connectedPanorama = _getClosestPanorama.panorama;
|
214
|
+
|
203
215
|
if (!connectedPanorama) return;
|
204
216
|
connectPanorama(panorama, connectedPanorama, Location, center, true);
|
205
217
|
});
|
206
218
|
return panorama;
|
207
219
|
};
|
208
220
|
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
221
|
+
var connectPanorama = function connectPanorama(panorama, connectedPanorama, location, center) {
|
222
|
+
var isDoorLink = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
223
|
+
var locationX = location.Y - center[1];
|
224
|
+
var locationY = location.X - center[0];
|
225
|
+
var locationZ = isDoorLink ? -10 : -100;
|
226
|
+
var icon = isDoorLink ? _doorIcon.default : _spotIcon.default;
|
227
|
+
var iconUrl = "".concat(icon, "?id=").concat(panorama['panorama_index'], "-").concat(panorama['panorama_id'], "-").concat(Math.random());
|
228
|
+
var defaultScale = 20;
|
229
|
+
var maxScale = 50;
|
230
|
+
var defaultLength = 120;
|
231
|
+
var length = (0, _geometric.lineLength)([[0, 0], [locationX, locationY]]);
|
232
|
+
var scale = length / defaultLength * defaultScale;
|
233
|
+
var finalScale = scale > maxScale ? maxScale : scale;
|
234
|
+
var resultScale = isDoorLink ? finalScale : finalScale - 15;
|
235
|
+
var position = new THREE.Vector3(locationX, locationZ, locationY);
|
224
236
|
panorama.link(connectedPanorama, position, resultScale, iconUrl);
|
225
237
|
};
|
226
238
|
|
227
|
-
|
239
|
+
var PanoramaTab = function PanoramaTab(_ref4) {
|
228
240
|
var _panoramas$currentRoo;
|
229
241
|
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
242
|
+
var json = _ref4.json,
|
243
|
+
planImage = _ref4.planImage,
|
244
|
+
images = _ref4.images,
|
245
|
+
disabled = _ref4.disabled;
|
246
|
+
|
247
|
+
var _useState = (0, _react.useState)(true),
|
248
|
+
_useState2 = _slicedToArray(_useState, 2),
|
249
|
+
showInstructions = _useState2[0],
|
250
|
+
setInstructionsState = _useState2[1];
|
251
|
+
|
252
|
+
var _useState3 = (0, _react.useState)(true),
|
253
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
254
|
+
loadingState = _useState4[0],
|
255
|
+
setLoadingState = _useState4[1];
|
256
|
+
|
257
|
+
var _useState5 = (0, _react.useState)(0),
|
258
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
259
|
+
windowWidth = _useState6[0],
|
260
|
+
setWindowWidth = _useState6[1];
|
261
|
+
|
262
|
+
var _useState7 = (0, _react.useState)(true),
|
263
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
264
|
+
isMapDisabled = _useState8[0],
|
265
|
+
setMapDisabledState = _useState8[1];
|
266
|
+
|
267
|
+
var _useState9 = (0, _react.useState)({
|
241
268
|
X: 1,
|
242
269
|
Y: 1
|
243
|
-
})
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
270
|
+
}),
|
271
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
272
|
+
planScale = _useState10[0],
|
273
|
+
setPlanScale = _useState10[1];
|
274
|
+
|
275
|
+
var _useState11 = (0, _react.useState)(false),
|
276
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
277
|
+
autoplayEnabled = _useState12[0],
|
278
|
+
setAutoplayState = _useState12[1];
|
279
|
+
|
280
|
+
var _useState13 = (0, _react.useState)(cameraFovValues.x1),
|
281
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
282
|
+
cameraFov = _useState14[0],
|
283
|
+
setCameraFov = _useState14[1];
|
284
|
+
|
285
|
+
var _useState15 = (0, _react.useState)(0),
|
286
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
287
|
+
currentRoomIndex = _useState16[0],
|
288
|
+
setCurrentRoomIndex = _useState16[1];
|
289
|
+
|
290
|
+
var _useState17 = (0, _react.useState)([]),
|
291
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
292
|
+
panoramas = _useState18[0],
|
293
|
+
setPanoramas = _useState18[1];
|
294
|
+
|
295
|
+
var _useState19 = (0, _react.useState)(null),
|
296
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
297
|
+
viewer = _useState20[0],
|
298
|
+
setViewer = _useState20[1];
|
299
|
+
|
300
|
+
var changePanorama = function changePanorama(panorama) {
|
251
301
|
setCurrentRoomIndex(panorama['panorama_index']);
|
252
302
|
viewer.setPanorama(panorama);
|
253
303
|
};
|
254
304
|
|
255
|
-
|
256
|
-
|
305
|
+
var setScale = function setScale() {
|
306
|
+
var image = document.querySelector('.widget-tab__panorama-map img');
|
257
307
|
setPlanScale((0, _panoramaHelpers.getScale)(image, json));
|
258
308
|
};
|
259
309
|
|
260
|
-
|
310
|
+
var onImageLoaded = function onImageLoaded() {
|
261
311
|
setScale();
|
262
312
|
setMapDisabledState(!json);
|
263
313
|
};
|
264
314
|
|
265
|
-
|
266
|
-
|
315
|
+
var getDotClassName = function getDotClassName(index) {
|
316
|
+
var className = 'widget-tab__panorama-map__dot widget-tab__panorama-map__dot--big';
|
267
317
|
if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
|
268
318
|
return className;
|
269
319
|
};
|
270
320
|
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
top
|
275
|
-
} = _ref5;
|
321
|
+
var getDotPosition = function getDotPosition(_ref5) {
|
322
|
+
var left = _ref5.left,
|
323
|
+
top = _ref5.top;
|
276
324
|
return {
|
277
325
|
left: "".concat(left * planScale.X, "px"),
|
278
326
|
top: "".concat(top * planScale.Y, "px")
|
279
327
|
};
|
280
328
|
};
|
281
329
|
|
282
|
-
|
330
|
+
var updateCameraFov = function updateCameraFov(fov) {
|
283
331
|
setCameraFov(fov);
|
284
332
|
viewer.camera.fov = fov;
|
285
333
|
viewer.camera.currentFov = fov;
|
286
334
|
viewer.camera.updateProjectionMatrix();
|
287
335
|
};
|
288
336
|
|
289
|
-
|
337
|
+
var toggleFov = function toggleFov() {
|
290
338
|
if (viewer.camera.fov === cameraFovValues.x1) {
|
291
339
|
updateCameraFov(cameraFovValues.x2);
|
292
340
|
return;
|
@@ -295,7 +343,7 @@ const PanoramaTab = _ref4 => {
|
|
295
343
|
updateCameraFov(cameraFovValues.x1);
|
296
344
|
};
|
297
345
|
|
298
|
-
|
346
|
+
var toggleAutoplay = function toggleAutoplay() {
|
299
347
|
setAutoplayState(!autoplayEnabled);
|
300
348
|
|
301
349
|
if (autoplayEnabled) {
|
@@ -306,27 +354,29 @@ const PanoramaTab = _ref4 => {
|
|
306
354
|
viewer.enableAutoRate();
|
307
355
|
};
|
308
356
|
|
309
|
-
|
357
|
+
var updateWindowWidth = function updateWindowWidth() {
|
358
|
+
return setWindowWidth(window.innerWidth);
|
359
|
+
};
|
310
360
|
|
311
|
-
(0, _react.useEffect)(()
|
361
|
+
(0, _react.useEffect)(function () {
|
312
362
|
window.addEventListener('resize', updateWindowWidth);
|
313
363
|
return function cleanup() {
|
314
364
|
window.removeEventListener('resize', updateWindowWidth);
|
315
365
|
};
|
316
366
|
}, []);
|
317
|
-
(0, _react.useEffect)(()
|
367
|
+
(0, _react.useEffect)(function () {
|
318
368
|
if (!panoramas.length) return;
|
319
|
-
|
320
|
-
|
369
|
+
var container = document.querySelector('.widget-tab__panorama-overlay');
|
370
|
+
var newViewer = new PANOLENS.Viewer({
|
321
371
|
autoRotateActivationDuration: 1,
|
322
372
|
autoHideInfospot: false,
|
323
373
|
controlButtons: [],
|
324
374
|
controlBar: false,
|
325
375
|
cameraFov: cameraFovValues.x1,
|
326
|
-
container
|
376
|
+
container: container
|
327
377
|
});
|
328
378
|
|
329
|
-
|
379
|
+
var preventCameraFovChange = function preventCameraFovChange(e) {
|
330
380
|
e.preventDefault();
|
331
381
|
e.stopPropagation();
|
332
382
|
newViewer.camera.fov = newViewer.camera.currentFov;
|
@@ -335,12 +385,10 @@ const PanoramaTab = _ref4 => {
|
|
335
385
|
|
336
386
|
container.addEventListener('mousewheel', preventCameraFovChange);
|
337
387
|
container.addEventListener('touchmove', preventCameraFovChange);
|
338
|
-
panoramas.forEach(panorama
|
388
|
+
panoramas.forEach(function (panorama) {
|
339
389
|
if (!panorama.panorama_id) return;
|
340
|
-
panorama.addEventListener('enter', _ref6
|
341
|
-
|
342
|
-
target
|
343
|
-
} = _ref6;
|
390
|
+
panorama.addEventListener('enter', function (_ref6) {
|
391
|
+
var target = _ref6.target;
|
344
392
|
return setCurrentRoomIndex(target['panorama_index']);
|
345
393
|
});
|
346
394
|
newViewer.add(panorama);
|
@@ -348,68 +396,76 @@ const PanoramaTab = _ref4 => {
|
|
348
396
|
newViewer.scene.rotation.y = Math.PI / 2;
|
349
397
|
newViewer.camera.currentFov = cameraFovValues.x1;
|
350
398
|
setViewer(newViewer);
|
351
|
-
|
352
|
-
|
399
|
+
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
|
400
|
+
var orientationControls = new _threeDeviceOrientation.default(camera);
|
353
401
|
|
354
|
-
|
402
|
+
var animate = function animate() {
|
355
403
|
window.requestAnimationFrame(animate);
|
356
404
|
camera.aspect = window.innerWidth / window.innerHeight;
|
357
405
|
camera.updateProjectionMatrix();
|
358
406
|
orientationControls.update();
|
359
|
-
|
407
|
+
var fovElement = document.querySelector('.widget-tab__panorama-map__fov');
|
360
408
|
if (!fovElement) return;
|
361
|
-
|
362
|
-
|
409
|
+
var control = newViewer.getControl();
|
410
|
+
var angle = -(control.alpha || control.getAzimuthalAngle());
|
363
411
|
fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
|
364
412
|
};
|
365
413
|
|
366
414
|
animate();
|
367
415
|
}, [panoramas]);
|
368
416
|
(0, _react.useEffect)(setScale, [json, windowWidth]);
|
369
|
-
(0, _react.useEffect)(
|
417
|
+
(0, _react.useEffect)(function () {
|
418
|
+
return setPanoramas(getPanoramas(json, images, setLoadingState));
|
419
|
+
}, [json, images]);
|
370
420
|
|
371
|
-
|
421
|
+
var onStart = function onStart() {
|
372
422
|
setInstructionsState(false);
|
373
423
|
|
374
424
|
try {
|
375
425
|
if (!DeviceOrientationEvent.requestPermission) return;
|
376
|
-
return DeviceOrientationEvent.requestPermission().then(status
|
426
|
+
return DeviceOrientationEvent.requestPermission().then(function (status) {
|
377
427
|
if (status !== _deviceOrientationStatus.deviceOrientationStatus.GRANTED) {
|
378
|
-
setTimeout(
|
428
|
+
setTimeout(function () {
|
429
|
+
return viewer.enableControl(ORBIT);
|
430
|
+
}, 100);
|
379
431
|
return;
|
380
432
|
}
|
381
433
|
|
382
|
-
setTimeout(
|
434
|
+
setTimeout(function () {
|
435
|
+
return viewer.enableControl(DEVICEORIENTATION);
|
436
|
+
}, 100);
|
383
437
|
});
|
384
438
|
} catch (error) {
|
385
439
|
console.error(error.message);
|
386
440
|
}
|
387
441
|
};
|
388
442
|
|
389
|
-
|
390
|
-
return points.map(_ref7
|
391
|
-
|
443
|
+
var getRoomPointsAsString = function getRoomPointsAsString(points) {
|
444
|
+
return points.map(function (_ref7) {
|
445
|
+
var _ref8 = _slicedToArray(_ref7, 2),
|
446
|
+
x = _ref8[0],
|
447
|
+
y = _ref8[1];
|
448
|
+
|
392
449
|
return [x * planScale.X, y * planScale.Y];
|
393
|
-
}).flat().filter(
|
450
|
+
}).flat().filter(function (num) {
|
451
|
+
return !isNaN(num);
|
452
|
+
}).toString();
|
394
453
|
};
|
395
454
|
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
const availablePanoramas = panoramas.filter(_ref8 => {
|
405
|
-
let {
|
406
|
-
userData
|
407
|
-
} = _ref8;
|
455
|
+
var onMapClick = function onMapClick(event) {
|
456
|
+
var image = document.querySelector('.widget-tab__panorama-map img');
|
457
|
+
var clientX = event.clientX,
|
458
|
+
clientY = event.clientY;
|
459
|
+
var x = (clientX - image.x) / planScale.X;
|
460
|
+
var y = (clientY - image.y) / planScale.Y;
|
461
|
+
var availablePanoramas = panoramas.filter(function (_ref9) {
|
462
|
+
var userData = _ref9.userData;
|
408
463
|
return (0, _geometric.pointInPolygon)([x, y], userData.points);
|
409
464
|
});
|
410
|
-
|
411
|
-
|
412
|
-
|
465
|
+
|
466
|
+
var _getClosestPanorama2 = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas),
|
467
|
+
panorama = _getClosestPanorama2.panorama;
|
468
|
+
|
413
469
|
if (!panorama) return;
|
414
470
|
changePanorama(panorama);
|
415
471
|
};
|
@@ -426,21 +482,23 @@ const PanoramaTab = _ref4 => {
|
|
426
482
|
src: planImage,
|
427
483
|
onLoad: onImageLoaded,
|
428
484
|
alt: "plan"
|
429
|
-
}), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map((panorama, index)
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
485
|
+
}), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map(function (panorama, index) {
|
486
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
487
|
+
key: index,
|
488
|
+
className: getDotClassName(index),
|
489
|
+
style: getDotPosition(panorama.userData),
|
490
|
+
onClick: function onClick() {
|
491
|
+
return changePanorama(panorama);
|
492
|
+
}
|
493
|
+
});
|
494
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
435
495
|
className: "widget-tab__panorama-map__fov",
|
436
496
|
style: getDotPosition(((_panoramas$currentRoo = panoramas[currentRoomIndex]) === null || _panoramas$currentRoo === void 0 ? void 0 : _panoramas$currentRoo.userData) || getDefaultUserData())
|
437
497
|
}), /*#__PURE__*/_react.default.createElement("svg", {
|
438
498
|
key: "X-".concat(planScale.X, "-Y-").concat(planScale.Y),
|
439
499
|
onClick: onMapClick
|
440
|
-
}, panoramas.map((
|
441
|
-
|
442
|
-
userData
|
443
|
-
} = _ref9;
|
500
|
+
}, panoramas.map(function (_ref10, index) {
|
501
|
+
var userData = _ref10.userData;
|
444
502
|
return /*#__PURE__*/_react.default.createElement("polygon", {
|
445
503
|
key: index,
|
446
504
|
points: getRoomPointsAsString(userData.points)
|