hart-estate-widget 0.0.48 → 0.0.51
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 +42 -25
- 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 +242 -186
- package/build/components/RotationTab.js +71 -32
- package/build/components/Widget.js +44 -28
- package/build/config/defaultConfig.js +2 -4
- 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 +4 -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,88 +49,107 @@ 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
|
-
if (panoramaId.includes(_panoramaHelpers.cameraIdBeginning)) {
|
116
|
-
|
118
|
+
if (panoramaId.toLowerCase().includes(_panoramaHelpers.cameraIdBeginning)) {
|
119
|
+
var cameraIdIndex = panoramaId.toLowerCase().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
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
left = currentCamera.Location.X;
|
138
|
-
top = currentCamera.Location.Y;
|
139
|
-
}
|
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];
|
140
140
|
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
};
|
141
|
+
if (panorama.src.toLowerCase().includes(_panoramaHelpers.cameraIdBeginning)) {
|
142
|
+
var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, panorama.src);
|
143
|
+
left = currentCamera.Location.X;
|
144
|
+
top = currentCamera.Location.Y;
|
146
145
|
}
|
147
146
|
|
147
|
+
panorama.userData = {
|
148
|
+
left: left,
|
149
|
+
top: top,
|
150
|
+
points: roomPoints
|
151
|
+
};
|
152
|
+
|
148
153
|
if (panorama['room_id'] === _store.default.initialPanoramaRoomId) {
|
149
154
|
acc.unshift(panorama);
|
150
155
|
} else {
|
@@ -153,9 +158,11 @@ const getPanoramas = (json, images, setLoadingState) => {
|
|
153
158
|
});
|
154
159
|
return acc;
|
155
160
|
}, []);
|
156
|
-
return panoramas.map((panorama, index)
|
161
|
+
return panoramas.map(function (panorama, index) {
|
157
162
|
panorama['panorama_index'] = index;
|
158
|
-
|
163
|
+
var currentRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
|
164
|
+
return room.ID === panorama['room_id'];
|
165
|
+
});
|
159
166
|
|
160
167
|
if (!panorama.linkedSpots.length) {
|
161
168
|
return setPanoramaLinks(json, currentRoom, panorama, panoramas);
|
@@ -165,128 +172,167 @@ const getPanoramas = (json, images, setLoadingState) => {
|
|
165
172
|
});
|
166
173
|
};
|
167
174
|
|
168
|
-
|
169
|
-
|
170
|
-
panorama['room_images'].forEach(image
|
175
|
+
var setPanoramaLinks = function setPanoramaLinks(json, currentRoom, panorama, panoramas) {
|
176
|
+
var center = [panorama.userData.left, panorama.userData.top];
|
177
|
+
panorama['room_images'].forEach(function (image) {
|
171
178
|
if (image === panorama.src) return;
|
172
|
-
|
173
|
-
|
174
|
-
src
|
175
|
-
} = _ref;
|
179
|
+
var connectedPanorama = panoramas.find(function (_ref) {
|
180
|
+
var src = _ref.src;
|
176
181
|
return src === image;
|
177
182
|
});
|
178
|
-
|
183
|
+
var currentCamera = (0, _panoramaHelpers.getCameraFromSrc)(json, connectedPanorama.src);
|
179
184
|
if (!currentCamera) return;
|
180
185
|
connectPanorama(panorama, connectedPanorama, currentCamera.Location, center, false);
|
181
186
|
});
|
182
|
-
json.Floors[0].Doors.forEach(_ref2
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
187
|
+
json.Floors[0].Doors.forEach(function (_ref2) {
|
188
|
+
var Location = _ref2.Location,
|
189
|
+
Walls = _ref2.Walls;
|
190
|
+
if (!Walls.some(function (doorWallId) {
|
191
|
+
return currentRoom.Walls.some(function (roomWallId) {
|
192
|
+
return roomWallId === doorWallId;
|
193
|
+
});
|
194
|
+
})) return;
|
195
|
+
var connectedRoom = json.Floors[0].Units[0].Rooms.find(function (room) {
|
196
|
+
var roomHasSameWall = room.Walls.some(function (roomWallId) {
|
197
|
+
return Walls.some(function (doorWallId) {
|
198
|
+
return roomWallId === doorWallId;
|
199
|
+
});
|
200
|
+
});
|
201
|
+
var isSameRoom = room.ID === currentRoom.ID;
|
191
202
|
return roomHasSameWall && !isSameRoom;
|
192
203
|
});
|
193
204
|
if (!connectedRoom) return;
|
194
|
-
|
195
|
-
|
196
|
-
room_id
|
197
|
-
} = _ref3;
|
205
|
+
var availablePanoramas = panoramas.filter(function (_ref3) {
|
206
|
+
var room_id = _ref3.room_id;
|
198
207
|
return room_id === connectedRoom.ID;
|
199
208
|
});
|
200
|
-
|
201
|
-
|
202
|
-
|
209
|
+
|
210
|
+
var _getClosestPanorama = (0, _panoramaHelpers.getClosestPanorama)([Location.X, Location.Y], availablePanoramas),
|
211
|
+
connectedPanorama = _getClosestPanorama.panorama;
|
212
|
+
|
203
213
|
if (!connectedPanorama) return;
|
204
214
|
connectPanorama(panorama, connectedPanorama, Location, center, true);
|
205
215
|
});
|
206
216
|
return panorama;
|
207
217
|
};
|
208
218
|
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
219
|
+
var connectPanorama = function connectPanorama(panorama, connectedPanorama, location, center) {
|
220
|
+
var isDoorLink = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
221
|
+
var locationX = location.Y - center[1];
|
222
|
+
var locationY = location.X - center[0];
|
223
|
+
var locationZ = isDoorLink ? -10 : -100;
|
224
|
+
var icon = isDoorLink ? _doorIcon.default : _spotIcon.default;
|
225
|
+
var iconUrl = "".concat(icon, "?id=").concat(panorama['panorama_index'], "-").concat(panorama['panorama_id'], "-").concat(Math.random());
|
226
|
+
var defaultScale = 20;
|
227
|
+
var maxScale = 50;
|
228
|
+
var defaultLength = 120;
|
229
|
+
var length = (0, _geometric.lineLength)([[0, 0], [locationX, locationY]]);
|
230
|
+
var scale = length / defaultLength * defaultScale;
|
231
|
+
var finalScale = scale > maxScale ? maxScale : scale;
|
232
|
+
var resultScale = isDoorLink ? finalScale : finalScale - 15;
|
233
|
+
var position = new THREE.Vector3(locationX, locationZ, locationY);
|
224
234
|
panorama.link(connectedPanorama, position, resultScale, iconUrl);
|
225
235
|
};
|
226
236
|
|
227
|
-
|
237
|
+
var PanoramaTab = function PanoramaTab(_ref4) {
|
228
238
|
var _panoramas$currentRoo;
|
229
239
|
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
240
|
+
var json = _ref4.json,
|
241
|
+
planImage = _ref4.planImage,
|
242
|
+
images = _ref4.images,
|
243
|
+
disabled = _ref4.disabled;
|
244
|
+
|
245
|
+
var _useState = (0, _react.useState)(true),
|
246
|
+
_useState2 = _slicedToArray(_useState, 2),
|
247
|
+
showInstructions = _useState2[0],
|
248
|
+
setInstructionsState = _useState2[1];
|
249
|
+
|
250
|
+
var _useState3 = (0, _react.useState)(true),
|
251
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
252
|
+
loadingState = _useState4[0],
|
253
|
+
setLoadingState = _useState4[1];
|
254
|
+
|
255
|
+
var _useState5 = (0, _react.useState)(0),
|
256
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
257
|
+
windowWidth = _useState6[0],
|
258
|
+
setWindowWidth = _useState6[1];
|
259
|
+
|
260
|
+
var _useState7 = (0, _react.useState)(true),
|
261
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
262
|
+
isMapDisabled = _useState8[0],
|
263
|
+
setMapDisabledState = _useState8[1];
|
264
|
+
|
265
|
+
var _useState9 = (0, _react.useState)({
|
241
266
|
X: 1,
|
242
267
|
Y: 1
|
243
|
-
})
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
268
|
+
}),
|
269
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
270
|
+
planScale = _useState10[0],
|
271
|
+
setPlanScale = _useState10[1];
|
272
|
+
|
273
|
+
var _useState11 = (0, _react.useState)(false),
|
274
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
275
|
+
autoplayEnabled = _useState12[0],
|
276
|
+
setAutoplayState = _useState12[1];
|
277
|
+
|
278
|
+
var _useState13 = (0, _react.useState)(cameraFovValues.x1),
|
279
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
280
|
+
cameraFov = _useState14[0],
|
281
|
+
setCameraFov = _useState14[1];
|
282
|
+
|
283
|
+
var _useState15 = (0, _react.useState)(0),
|
284
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
285
|
+
currentRoomIndex = _useState16[0],
|
286
|
+
setCurrentRoomIndex = _useState16[1];
|
287
|
+
|
288
|
+
var _useState17 = (0, _react.useState)([]),
|
289
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
290
|
+
panoramas = _useState18[0],
|
291
|
+
setPanoramas = _useState18[1];
|
292
|
+
|
293
|
+
var _useState19 = (0, _react.useState)(null),
|
294
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
295
|
+
viewer = _useState20[0],
|
296
|
+
setViewer = _useState20[1];
|
297
|
+
|
298
|
+
var changePanorama = function changePanorama(panorama) {
|
251
299
|
setCurrentRoomIndex(panorama['panorama_index']);
|
252
300
|
viewer.setPanorama(panorama);
|
253
301
|
};
|
254
302
|
|
255
|
-
|
256
|
-
|
303
|
+
var setScale = function setScale() {
|
304
|
+
var image = document.querySelector('.widget-tab__panorama-map img');
|
257
305
|
setPlanScale((0, _panoramaHelpers.getScale)(image, json));
|
258
306
|
};
|
259
307
|
|
260
|
-
|
308
|
+
var onImageLoaded = function onImageLoaded() {
|
261
309
|
setScale();
|
262
310
|
setMapDisabledState(!json);
|
263
311
|
};
|
264
312
|
|
265
|
-
|
266
|
-
|
313
|
+
var getDotClassName = function getDotClassName(index) {
|
314
|
+
var className = 'widget-tab__panorama-map__dot widget-tab__panorama-map__dot--big';
|
267
315
|
if (currentRoomIndex === index) className += ' widget-tab__panorama-map__dot--active';
|
268
316
|
return className;
|
269
317
|
};
|
270
318
|
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
top
|
275
|
-
} = _ref5;
|
319
|
+
var getDotPosition = function getDotPosition(_ref5) {
|
320
|
+
var left = _ref5.left,
|
321
|
+
top = _ref5.top;
|
276
322
|
return {
|
277
323
|
left: "".concat(left * planScale.X, "px"),
|
278
324
|
top: "".concat(top * planScale.Y, "px")
|
279
325
|
};
|
280
326
|
};
|
281
327
|
|
282
|
-
|
328
|
+
var updateCameraFov = function updateCameraFov(fov) {
|
283
329
|
setCameraFov(fov);
|
284
330
|
viewer.camera.fov = fov;
|
285
331
|
viewer.camera.currentFov = fov;
|
286
332
|
viewer.camera.updateProjectionMatrix();
|
287
333
|
};
|
288
334
|
|
289
|
-
|
335
|
+
var toggleFov = function toggleFov() {
|
290
336
|
if (viewer.camera.fov === cameraFovValues.x1) {
|
291
337
|
updateCameraFov(cameraFovValues.x2);
|
292
338
|
return;
|
@@ -295,7 +341,7 @@ const PanoramaTab = _ref4 => {
|
|
295
341
|
updateCameraFov(cameraFovValues.x1);
|
296
342
|
};
|
297
343
|
|
298
|
-
|
344
|
+
var toggleAutoplay = function toggleAutoplay() {
|
299
345
|
setAutoplayState(!autoplayEnabled);
|
300
346
|
|
301
347
|
if (autoplayEnabled) {
|
@@ -306,27 +352,29 @@ const PanoramaTab = _ref4 => {
|
|
306
352
|
viewer.enableAutoRate();
|
307
353
|
};
|
308
354
|
|
309
|
-
|
355
|
+
var updateWindowWidth = function updateWindowWidth() {
|
356
|
+
return setWindowWidth(window.innerWidth);
|
357
|
+
};
|
310
358
|
|
311
|
-
(0, _react.useEffect)(()
|
359
|
+
(0, _react.useEffect)(function () {
|
312
360
|
window.addEventListener('resize', updateWindowWidth);
|
313
361
|
return function cleanup() {
|
314
362
|
window.removeEventListener('resize', updateWindowWidth);
|
315
363
|
};
|
316
364
|
}, []);
|
317
|
-
(0, _react.useEffect)(()
|
365
|
+
(0, _react.useEffect)(function () {
|
318
366
|
if (!panoramas.length) return;
|
319
|
-
|
320
|
-
|
367
|
+
var container = document.querySelector('.widget-tab__panorama-overlay');
|
368
|
+
var newViewer = new PANOLENS.Viewer({
|
321
369
|
autoRotateActivationDuration: 1,
|
322
370
|
autoHideInfospot: false,
|
323
371
|
controlButtons: [],
|
324
372
|
controlBar: false,
|
325
373
|
cameraFov: cameraFovValues.x1,
|
326
|
-
container
|
374
|
+
container: container
|
327
375
|
});
|
328
376
|
|
329
|
-
|
377
|
+
var preventCameraFovChange = function preventCameraFovChange(e) {
|
330
378
|
e.preventDefault();
|
331
379
|
e.stopPropagation();
|
332
380
|
newViewer.camera.fov = newViewer.camera.currentFov;
|
@@ -335,12 +383,10 @@ const PanoramaTab = _ref4 => {
|
|
335
383
|
|
336
384
|
container.addEventListener('mousewheel', preventCameraFovChange);
|
337
385
|
container.addEventListener('touchmove', preventCameraFovChange);
|
338
|
-
panoramas.forEach(panorama
|
386
|
+
panoramas.forEach(function (panorama) {
|
339
387
|
if (!panorama.panorama_id) return;
|
340
|
-
panorama.addEventListener('enter', _ref6
|
341
|
-
|
342
|
-
target
|
343
|
-
} = _ref6;
|
388
|
+
panorama.addEventListener('enter', function (_ref6) {
|
389
|
+
var target = _ref6.target;
|
344
390
|
return setCurrentRoomIndex(target['panorama_index']);
|
345
391
|
});
|
346
392
|
newViewer.add(panorama);
|
@@ -348,68 +394,76 @@ const PanoramaTab = _ref4 => {
|
|
348
394
|
newViewer.scene.rotation.y = Math.PI / 2;
|
349
395
|
newViewer.camera.currentFov = cameraFovValues.x1;
|
350
396
|
setViewer(newViewer);
|
351
|
-
|
352
|
-
|
397
|
+
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
|
398
|
+
var orientationControls = new _threeDeviceOrientation.default(camera);
|
353
399
|
|
354
|
-
|
400
|
+
var animate = function animate() {
|
355
401
|
window.requestAnimationFrame(animate);
|
356
402
|
camera.aspect = window.innerWidth / window.innerHeight;
|
357
403
|
camera.updateProjectionMatrix();
|
358
404
|
orientationControls.update();
|
359
|
-
|
405
|
+
var fovElement = document.querySelector('.widget-tab__panorama-map__fov');
|
360
406
|
if (!fovElement) return;
|
361
|
-
|
362
|
-
|
407
|
+
var control = newViewer.getControl();
|
408
|
+
var angle = -(control.alpha || control.getAzimuthalAngle());
|
363
409
|
fovElement.style.transform = "translate(-50%, -50%) rotate(".concat(angle, "rad)");
|
364
410
|
};
|
365
411
|
|
366
412
|
animate();
|
367
413
|
}, [panoramas]);
|
368
414
|
(0, _react.useEffect)(setScale, [json, windowWidth]);
|
369
|
-
(0, _react.useEffect)(
|
415
|
+
(0, _react.useEffect)(function () {
|
416
|
+
return setPanoramas(getPanoramas(json, images, setLoadingState));
|
417
|
+
}, [json, images]);
|
370
418
|
|
371
|
-
|
419
|
+
var onStart = function onStart() {
|
372
420
|
setInstructionsState(false);
|
373
421
|
|
374
422
|
try {
|
375
423
|
if (!DeviceOrientationEvent.requestPermission) return;
|
376
|
-
return DeviceOrientationEvent.requestPermission().then(status
|
424
|
+
return DeviceOrientationEvent.requestPermission().then(function (status) {
|
377
425
|
if (status !== _deviceOrientationStatus.deviceOrientationStatus.GRANTED) {
|
378
|
-
setTimeout(
|
426
|
+
setTimeout(function () {
|
427
|
+
return viewer.enableControl(ORBIT);
|
428
|
+
}, 100);
|
379
429
|
return;
|
380
430
|
}
|
381
431
|
|
382
|
-
setTimeout(
|
432
|
+
setTimeout(function () {
|
433
|
+
return viewer.enableControl(DEVICEORIENTATION);
|
434
|
+
}, 100);
|
383
435
|
});
|
384
436
|
} catch (error) {
|
385
437
|
console.error(error.message);
|
386
438
|
}
|
387
439
|
};
|
388
440
|
|
389
|
-
|
390
|
-
return points.map(_ref7
|
391
|
-
|
441
|
+
var getRoomPointsAsString = function getRoomPointsAsString(points) {
|
442
|
+
return points.map(function (_ref7) {
|
443
|
+
var _ref8 = _slicedToArray(_ref7, 2),
|
444
|
+
x = _ref8[0],
|
445
|
+
y = _ref8[1];
|
446
|
+
|
392
447
|
return [x * planScale.X, y * planScale.Y];
|
393
|
-
}).flat().filter(
|
448
|
+
}).flat().filter(function (num) {
|
449
|
+
return !isNaN(num);
|
450
|
+
}).toString();
|
394
451
|
};
|
395
452
|
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
const availablePanoramas = panoramas.filter(_ref8 => {
|
405
|
-
let {
|
406
|
-
userData
|
407
|
-
} = _ref8;
|
453
|
+
var onMapClick = function onMapClick(event) {
|
454
|
+
var image = document.querySelector('.widget-tab__panorama-map img');
|
455
|
+
var clientX = event.clientX,
|
456
|
+
clientY = event.clientY;
|
457
|
+
var x = (clientX - image.x) / planScale.X;
|
458
|
+
var y = (clientY - image.y) / planScale.Y;
|
459
|
+
var availablePanoramas = panoramas.filter(function (_ref9) {
|
460
|
+
var userData = _ref9.userData;
|
408
461
|
return (0, _geometric.pointInPolygon)([x, y], userData.points);
|
409
462
|
});
|
410
|
-
|
411
|
-
|
412
|
-
|
463
|
+
|
464
|
+
var _getClosestPanorama2 = (0, _panoramaHelpers.getClosestPanorama)([x, y], availablePanoramas),
|
465
|
+
panorama = _getClosestPanorama2.panorama;
|
466
|
+
|
413
467
|
if (!panorama) return;
|
414
468
|
changePanorama(panorama);
|
415
469
|
};
|
@@ -426,21 +480,23 @@ const PanoramaTab = _ref4 => {
|
|
426
480
|
src: planImage,
|
427
481
|
onLoad: onImageLoaded,
|
428
482
|
alt: "plan"
|
429
|
-
}), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map((panorama, index)
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
483
|
+
}), !isMapDisabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panoramas.map(function (panorama, index) {
|
484
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
485
|
+
key: index,
|
486
|
+
className: getDotClassName(index),
|
487
|
+
style: getDotPosition(panorama.userData),
|
488
|
+
onClick: function onClick() {
|
489
|
+
return changePanorama(panorama);
|
490
|
+
}
|
491
|
+
});
|
492
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
435
493
|
className: "widget-tab__panorama-map__fov",
|
436
494
|
style: getDotPosition(((_panoramas$currentRoo = panoramas[currentRoomIndex]) === null || _panoramas$currentRoo === void 0 ? void 0 : _panoramas$currentRoo.userData) || getDefaultUserData())
|
437
495
|
}), /*#__PURE__*/_react.default.createElement("svg", {
|
438
496
|
key: "X-".concat(planScale.X, "-Y-").concat(planScale.Y),
|
439
497
|
onClick: onMapClick
|
440
|
-
}, panoramas.map((
|
441
|
-
|
442
|
-
userData
|
443
|
-
} = _ref9;
|
498
|
+
}, panoramas.map(function (_ref10, index) {
|
499
|
+
var userData = _ref10.userData;
|
444
500
|
return /*#__PURE__*/_react.default.createElement("polygon", {
|
445
501
|
key: index,
|
446
502
|
points: getRoomPointsAsString(userData.points)
|