hart-estate-widget 1.0.1 → 1.1.3

package/README.md

@@ -1,7 +1,147 @@
-# Компонент HART Estate
+# Компонент HART Estate Widget
 
-## Список доступных команд
 
-### `npm start` - запуск приложения
+## Способ установки с помощью NPM:
 
-### `npm run build` - билд приложения
+`npm install hart-estate-widget  --save`
+
+## Пример использования:
+
+```js
+import React, { useEffect, useState } from 'react';
+import { Widget, rotationModes } from 'hart-estate-widget';
+// либо
+import 'hart-estate-widget/build/widget.bundle.js'; // в таком случае создается глобальная переменная WidgetLibrary
+
+const WIDGET_OPTIONS = {
+  tabs: ['planImage', 'rotation', 'panorama'],
+  logo: '/path/to/logo.png',
+  planImage: '/path/to/plan.jpg',
+  rotationMode: rotationModes.DEFAULY,
+  rotationData: {
+    type: 'top_down',
+    items: [
+      '/path/to/rotation_image_1.jpg',
+      ...
+      '/path/to/rotation_image_5.jpg',
+    ],
+  },
+  panoramaData: {
+    type: 'sphere',
+    items: [
+      {
+        camera_id: '1234',
+        images: ['/path/to/panorama_image.jpg'],
+        room_id: '1234',
+      },
+    ],
+  },
+};
+
+const App = () => {
+  const [widget, setWidget] = useState(null);
+
+  useEffect(() => {
+    const createdWidget = new Widget('#widget-container', WIDGET_OPTIONS);
+    setState(createdWidget);
+  }, []);
+  
+  return (
+    <div>
+      <div id="widget-container" />
+    </div>
+  );
+}
+
+export App;
+
+```
+
+
+## Параметры:
+
+```js
+{
+  // элементы  
+  tabs: ['rotation', 'panorama'], // включенные элементы
+
+  // логотип
+  logo: '', // путь к логотипу
+  logoUrl: '', // ссылка, открывающаяся по клику на логотип
+
+  // локализация
+  locale: 'en', // языковой код ISO 639
+
+  // ширина/высота
+  width: 1920,
+  height: 1080,
+  resizable: true, // автоматически менять размер виджета под размер контейнера при изменении размеров окна
+
+  // значения
+  planImage: '', // путь к изображению планировки (необходимо для панорамного тура)
+  topViewImage: '', // путь к изображению планировки сверху
+  rotationMode: 'default', // режим работы изображений планировки
+  rotationData: {}, // тип изображений и пути к изображениям кругового просмотра (порядок обязателен)
+  panoramaData: {}, // тип панорамы и пути к изображениям 360°
+  panoramaFov: 75, // угол обзора камеры в режиме панорманого тура
+
+  // цвета
+  colors: {
+    main: '#HEX', // основной цвет кнопок, элементов
+    mainText: '#HEX', // цвет текста для кнопок, элементов, контрастирующий с основным
+  },
+}
+
+```
+
+## Типы элементов
+```js
+tabs: [
+  'rotation', // изображения кругового просмотра (порядок обязателен)
+  'panorama', // изображения 360°
+],
+rotationMode: [
+  rotationModes.DEFAULT, // режим просмотра вида сверху (несколько ракурсов) и стилизованной планировки
+  rotationModes.THREESIXTY, // режим прокрутки изображений кругового просмотра
+],
+rotationData.type: [
+  'top_down', // полная модель
+  'middle_cut', // модеь со срезом посередине
+],
+panoramaData.type: [
+  'sphere', // панорама с изображениями 360°
+  'cube', // панорама с 6 изображениями (top, down, left, right, front, back)
+],
+locale: [
+  'ru', // русский язык
+  'en', // английский язык
+],
+```
+
+
+## Публикация с помощью Nexus Registry NPM
+```js
+// in @hart-estate/widget package.json:
+"publishConfig": {
+  "registry": "https://nexus.myhart.ru/repository/npm/"
+},
+```
+`npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
+`npm install`
+`npm run build`
+`npm publish`
+
+
+## Способ установки с помощью Nexus Registry NPM:
+
+`npm adduser --auth-type=legacy --registry=https://nexus.myhart.ru/repository/npm/`
+
+```js
+// when reinstalling (updating), delete node_modules and package-lock.json
+// add .npmrc in root:
+  @hart-estate/widget:registry=https://nexus.myhart.ru/repository/npm/
+  registry=https://registry.npmjs.org/
+```
+
+`npm config set @hart-estate:registry https://nexus.myhart.ru/repository/npm/`
+`npm install`