hart-estate-widget 1.1.3 → 1.1.4
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/README.md +38 -38
- package/package.json +1 -1
package/README.md
CHANGED
@@ -1,17 +1,17 @@
|
|
1
|
-
#
|
1
|
+
# HART Estate Widget Component
|
2
2
|
|
3
3
|
|
4
|
-
##
|
4
|
+
## Installation using NPM:
|
5
5
|
|
6
6
|
`npm install hart-estate-widget --save`
|
7
7
|
|
8
|
-
##
|
8
|
+
## Usage example:
|
9
9
|
|
10
10
|
```js
|
11
11
|
import React, { useEffect, useState } from 'react';
|
12
12
|
import { Widget, rotationModes } from 'hart-estate-widget';
|
13
|
-
//
|
14
|
-
import 'hart-estate-widget/build/widget.bundle.js'; //
|
13
|
+
// or
|
14
|
+
import 'hart-estate-widget/build/widget.bundle.js'; // in this case, a global variable WidgetLibrary is created
|
15
15
|
|
16
16
|
const WIDGET_OPTIONS = {
|
17
17
|
tabs: ['planImage', 'rotation', 'panorama'],
|
@@ -58,68 +58,68 @@ export App;
|
|
58
58
|
```
|
59
59
|
|
60
60
|
|
61
|
-
##
|
61
|
+
## Parameters:
|
62
62
|
|
63
63
|
```js
|
64
64
|
{
|
65
|
-
//
|
66
|
-
tabs: ['rotation', 'panorama'], //
|
65
|
+
// elements
|
66
|
+
tabs: ['rotation', 'panorama'], // included elements
|
67
67
|
|
68
|
-
//
|
69
|
-
logo: '', //
|
70
|
-
logoUrl: '', //
|
68
|
+
// logo
|
69
|
+
logo: '', // path to logo
|
70
|
+
logoUrl: '', // link opened when logo is clicked
|
71
71
|
|
72
|
-
//
|
73
|
-
locale: 'en', //
|
72
|
+
// localization
|
73
|
+
locale: 'en', // ISO 639 language code
|
74
74
|
|
75
|
-
//
|
75
|
+
// width/height
|
76
76
|
width: 1920,
|
77
77
|
height: 1080,
|
78
|
-
resizable: true, //
|
78
|
+
resizable: true, // automatically resize the widget to the size of the container when the window is resized
|
79
79
|
|
80
|
-
//
|
81
|
-
planImage: '', //
|
82
|
-
topViewImage: '', //
|
83
|
-
rotationMode: 'default', //
|
84
|
-
rotationData: {}, //
|
85
|
-
panoramaData: {}, //
|
86
|
-
panoramaFov: 75, //
|
80
|
+
// values
|
81
|
+
planImage: '', // path to the plan image (required for panoramic tour)
|
82
|
+
topViewImage: '', // path to the top view image
|
83
|
+
rotationMode: 'default', // mode of operation for plan images
|
84
|
+
rotationData: {}, // type of images and paths to circular view images (order is mandatory)
|
85
|
+
panoramaData: {}, // type of panorama and paths to 360° images
|
86
|
+
panoramaFov: 75, // camera field of view angle for panoramic tour
|
87
87
|
|
88
|
-
//
|
88
|
+
// colors
|
89
89
|
colors: {
|
90
|
-
main: '#HEX', //
|
91
|
-
mainText: '#HEX', //
|
90
|
+
main: '#HEX', // main color of buttons, elements
|
91
|
+
mainText: '#HEX', // text color for buttons, elements contrasting with the main color
|
92
92
|
},
|
93
93
|
}
|
94
94
|
|
95
95
|
```
|
96
96
|
|
97
|
-
##
|
97
|
+
## Types of elements
|
98
98
|
```js
|
99
99
|
tabs: [
|
100
|
-
'rotation', //
|
101
|
-
'panorama', //
|
100
|
+
'rotation', // circular view images (order is mandatory)
|
101
|
+
'panorama', // 360° images
|
102
102
|
],
|
103
103
|
rotationMode: [
|
104
|
-
rotationModes.DEFAULT, //
|
105
|
-
rotationModes.THREESIXTY, //
|
104
|
+
rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
|
105
|
+
rotationModes.THREESIXTY, // image scrolling mode for circular view
|
106
106
|
],
|
107
107
|
rotationData.type: [
|
108
|
-
'top_down', //
|
109
|
-
'middle_cut', //
|
108
|
+
'top_down', // full model
|
109
|
+
'middle_cut', // model with cut in the middle
|
110
110
|
],
|
111
111
|
panoramaData.type: [
|
112
|
-
'sphere', //
|
113
|
-
'cube', //
|
112
|
+
'sphere', // 360° panorama
|
113
|
+
'cube', // panorama with 6 images (top, down, left, right, front, back)
|
114
114
|
],
|
115
115
|
locale: [
|
116
|
-
'ru', //
|
117
|
-
'en', //
|
116
|
+
'ru', // Russian language
|
117
|
+
'en', // English language
|
118
118
|
],
|
119
119
|
```
|
120
120
|
|
121
121
|
|
122
|
-
##
|
122
|
+
## Publishing with Nexus Registry NPM:
|
123
123
|
```js
|
124
124
|
// in @hart-estate/widget package.json:
|
125
125
|
"publishConfig": {
|
@@ -132,7 +132,7 @@ locale: [
|
|
132
132
|
`npm publish`
|
133
133
|
|
134
134
|
|
135
|
-
##
|
135
|
+
## Installation using Nexus Registry NPM:
|
136
136
|
|
137
137
|
`npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
|
138
138
|
|