npm - hart-estate-widget - Versions diffs - 3.9.16 → 4.0.1 - Mend

hart-estate-widget 3.9.16 → 4.0.1

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.

Files changed (14) hide show

package/README.md +225 -360
package/build/api.js +1 -0
package/build/createWidget.js +2 -0
package/build/{widget.module.js.LICENSE.txt → createWidget.js.LICENSE.txt} +34 -21
package/build/plugins/DebugPlugin.js +2 -0
package/build/{widget.bundle.js.LICENSE.txt → plugins/DebugPlugin.js.LICENSE.txt} +28 -28
package/build/plugins/DefaultMapPlugin.js +2 -0
package/build/plugins/DefaultMapPlugin.js.LICENSE.txt +49 -0
package/build/plugins/FovPlugin.js +1 -0
package/package.json +29 -38
package/build/widget.bundle.js +0 -2
package/build/widget.module.js +0 -2
package/build/widget.module.worker.js.LICENSE.txt +0 -12
/package/build/{widget.bundle.worker.js.LICENSE.txt → createWidget.worker.js.LICENSE.txt} +0 -0

package/README.md CHANGED Viewed

@@ -3,16 +3,16 @@
 The package is designed to present 2D and 3D floor plans generated by the AI service [getfloorplan.com](https://getfloorplan.com).
 # Table of Contents
--  [Quick Start](#quick-start)
-- - [Example index.html](#html)
-- - [Example index.tsx](#javascript)
-- - [Example index.sass](#sass)
--  [Docs](#docs)
-- - [Parameters](#parameters)
-- - [Types of Elements](#types-of-elements)
-- - [REST API Object](#widget-object-from-the-rest-api)
--  [Versioning](#versioning)
--  [Copyright and License](#copyright-and-license)
+- [Quick Start](#quick-start)
+  - [Example vite.config.ts](#vite)
+  - [Example index.html](#html)
+  - [Example index.js](#javascript)
+  - [Example index.sass](#sass)
+- [Docs](#docs)
+  - [Parameters](#parameters)
+  - [REST API Object](#widget-object-from-the-rest-api)
+- [Versioning](#versioning)
+- [Copyright and License](#copyright-and-license)
 # Quick Start
@@ -20,34 +20,32 @@ As a result, you will receive a website that can display various floor plans.
 ![node: ^18.0.0](https://img.shields.io/badge/nodeJS-^18.0.0-blue)
-- Download NodeJS 18+;
-- Create a new project;
-- Download the required packages
+- Download NodeJS 18+
+- Create a new project
+```shell
+npm init
 ```
-npm install hart-estate-widget@2.7.5
-npm install sass@1.62.1
-npm install parcel@2.8.3
-npm install @parcel/transformer-sass@2.8.3
+- Download the required packages
+```shell
+npm install -S hart-estate-widget@4.0.0  # GFP Widget package
+npm install -S -D vite                   # Vite bundler
+npm install -S -D sass-embedded          # Sass style compiler
 ```
-- Example structure of project:
+- Example structure of project
 ```
 .
-├── package-lock.json
-├── package.json
 ├── src
-│   ├── assets
-│   │   ├── img
-│   │   │   ├── logo.png
-│   │   └── sass
-│   │       └── index.sass
-│   ├── index.html
-│   └── js
-└       └── index.tsx
+│   ├── index.html
+│   ├── index.js
+│   ├── index.sass
+│   └── logo.png
+├── package.json
+└── package-lock.json
 ```
 - Copy-paste sample assets from below.
-- Run with `rm -rf dist && npx parcel ./src/index.html`
+- Run with `rm -rf dist && npx vite`
 - Open browser at:
-http://localhost:1234/?id=228ba1dd-64d3-4d33-bcd7-b4c670bed40e
+http://localhost:1234/?id=73b833c3-072a-4ac2-9f5d-7f7ac3d1fc9c
 > The query `id` parameter accepts the UUID4 received from [getfloorplan.com](https://getfloorplan.com)
 > You can use these UUID4 for test purposes:
@@ -57,68 +55,94 @@ http://localhost:1234/?id=228ba1dd-64d3-4d33-bcd7-b4c670bed40e
 > - Neutral style: `e8553134-0457-488c-8d3e-611b0e2be4d4`
 > - Modern style: `73b833c3-072a-4ac2-9f5d-7f7ac3d1fc9c`
+## VITE
+Insert the example into a file `vite.config.ts`
+```ts
+import { defineConfig } from 'vite';
+export default defineConfig({
+  root: 'src',
+  build: { outDir: '../dist' },
+  server: { port: 1234, open: true },
+});
+```
 ## HTML
 Insert the example into a file `src/index.html`
 ```html
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-    <title>katmosfera</title>
-    <link rel="icon" href="./assets/img/logo.png">
-    <script src="./js/index.tsx" type="module"></script>
+    <title>HART Estate Widget</title>
+    <script type="module" src="./index.js"></script>
+    <link rel="icon" href="./logo.png">
   </head>
   <body>
-    <section class="widget-section">
-      <div class="widget" id="widget"></div> <!--must match the first attribute in 'new Widget('#widget', options);' -->
-    </section>
+    <div id="widget"></div>
   </body>
 </html>
 ```
 ## JavaScript
-Insert the example into a file `src/js/index.tsx`
+Insert the example into a file `src/index.js`
 ```js
-import { ApiStore, Widget, rotationModes } from 'hart-estate-widget';
-import '../assets/sass/index.sass'; // style
-import logo from '../assets/img/logo.png'; // logo
-const WIDGET_API_URL = 'https://backend.estate.hart-digital.com';
+import { Api } from 'hart-estate-widget/build/api.js'
-const createWidget = async (logoUrl) => {
-  const widgetApiHandler = new ApiStore(WIDGET_API_URL)
+const searchParams = new URLSearchParams(document.location.search);
+const planId = searchParams.get('id');
+const crmPlanId = searchParams.get('crmPlanId');
-  const { searchParams } = new URL(document.location);
-  const planId = searchParams.get("id");
+const baseUrl = 'https://backend.estate.hart-digital.com';
-  const planData = await widgetApiHandler.loadWidgetData(planId);
-  const options = { // the parameters you need that are described below in "Parameters"
-    ...planData.parsed,
-    api_url: WIDGET_API_URL,
-    rotationMode: rotationModes.DEFAULT,
-    tabs: ['panorama', 'rotation'],
-    locale: 'en',
+const loadData = async () => {
+  const {loadCrmWidgetData, loadWidgetData} = new Api(baseUrl);
+  return crmPlanId ? loadCrmWidgetData(crmPlanId) : loadWidgetData(planId);
+};
+const loadCreateWidget = async () => (await import('hart-estate-widget/build/createWidget.js')).createWidget;
+const loadFovPlugin = async () => (await import('hart-estate-widget/build/plugins/FovPlugin.js')).FovPlugin;
+const loadLogoUrl = async () => (await import('./logo.png')).default;
+const loadStyle = async () => (await import('./index.sass')).default;
+const loadDocument = async () => new Promise((resolve) => (window.onload = resolve));
+const queue = [
+  loadData(),
+  loadCreateWidget(),
+  loadFovPlugin(),
+  loadLogoUrl(),
+  loadStyle(),
+  loadDocument(),
+];
+Promise.all(queue).then(([data, createWidget, FovPlugin, logoUrl]) => {
+  const options = {
+    baseUrl,
     logoUrl,
-    logo,
-  }
+    logoLinkUrl: 'https://getfloorplan.com',
+  };
-  new Widget('#widget', options); // must match the element id
-}
+  const plugins = [
+    new FovPlugin(2),
+  ];
-createWidget('https://yoursite/'); // create a widget
+  createWidget('#widget', data, options, plugins);
+});
 ```
 ## SASS
-Insert the example into a file `src/sass/index.sass`
+Insert the example into a file `src/index.sass`
 ```sass
 *, *:before, *:after
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale
-  font-family: 'Proxima Nova'
+  font-family: 'Proxima Nova', sans-serif
   text-decoration: none
   font-weight: 400
   color: #fff
@@ -128,281 +152,102 @@ Insert the example into a file `src/sass/index.sass`
   box-sizing: border-box
   -webkit-box-sizing: border-box
-body
+html, body
   width: 100%
   height: 100%
-  overflow: hidden
-.widget-section
+#widget
   width: 100%
   height: 100%
-  .widget
-    width: 100%
-    height: 100%
+  overflow: hidden
 ```
 # Docs
 ## Parameters:
 Here you can see a list of accessible options and examples of usage. There are accessible values for each option below in the block "Types of Elements".
-```ts
-type TConfig = {
-  /** Widget API Backend URL */
-  api_url: 'https://backend.example.com/';
-  /** Path/link to the logo */
-  logo: '';
-  /** Link opened when logo is clicked */
-  logoUrl: '';
-  /** Widget container offsetWidth */
-  width: 1920,
-  /** Widget container offsetHeight */
-  height: 1080,
-  /** Automatically resize the widget to the size of the container when the window is resized */
-  resizable: true;
-  /** Widget localization language (default: en) */
-  locale: 'en'
-  /** Use door proactive rectangle instead of door icon. */
-  enableDoorVisibility: false;
-  /** Type of images that will present in rotation tab, used as whitelist filter, defaults ['carousel', 'plan', 'topView'] */
-  availableRotationSteps: ['carousel', 'plan', 'topView'];
-  /** Available widget tabs, defaults ['rotation', 'plan', 'panorama'] */
-  tabs: ['rotation', 'plan', 'panorama'];
-  /**
-   * Mode of operation for plan images
-   * - `rotationModes.DEFAULT` - top view mode (multiple perspectives) and stylized plan view
-   * - `rotationModes.THREESIXTY` - image scrolling mode for circular view
-   * */
-  rotationMode: rotationModes.DEFAULT;
-  /** Camera persective FOV */
-  panoramaFov: 75;
-  /** Enable/disable camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in JSON) */
-  enableCameraRotationBetweenPanoramas: true;
-  /** Enable/disable transition for camera rotation between panoramas (if CameraPoint.Rotation.Yaw is defined in JSON and enableCameraRotationBetweenPanoramas enabled) */
-  enableCameraTransitionBetweenPanoramas: false;
-  /** Override primary camera point ID over JSON */
-  primaryCameraPointId: 'CameraPointId12345678-12345678-12345678';
-  /**
-   * Widget color settings
-   * - `main`: main color of buttons, elements
-   * - `mainText`: text color for buttons, elements contrasting with the main color
-   * */
-  colors: {
-    main: '#FFA900',
-    mainText: '#413E3E',
-  };
-  /** Panorama icons */
-  panoramaIcons: {
-    /** Icon for camera point links in one room */
-    spot: 'https://images.com/image-spot.svg';
-    /** Icon for proactive camera point links in one room */
-    interactiveSpot: 'https://images.com/image-interactive-spot.svg';
-    /** Icon for door link */
-    door: 'https://images.com/image-door.png';
-  };
-  /** Overrides locale keys with custom text or translation */
-  dictionaryOverrides: {
-    'create-points': 'Create a point', // text for create point
-    'delete-points': 'Remove point', // text for delete point
-    'research-plan': 'Research plan', // text for research plan
-    'rotate-plan': 'Rotate plan', // text for rotate plan
-    'ok': 'Ok', // button text
-    'made-by-link': 'https://getfloorplan.com/', // watermark link
-    'made-by-text': 'getfloorplan.com', // watermark text
-    'instructions-hint-text': '', // additional text on the bottom of instruction modal
-    'floor': '$0 floor' // floor text
-  };
-  /** Enable/disable modal of instruction in 3D tour */
-  instructionVisible: true;
-  /** Enable/disable auto rotation in 3D tour */
-  autoRotate: false;
-  /** Array of scale keys used as filter, can be x05, x1, ... */
-  scales: ['x05', 'x1'];
-  /** Enable/disable device gyroscope for AR */
-  enableGyroscope: true;
-  /**
-   * Scale button type
-   * - `img`: legacy button with icons x05, x1, etc...
-   * - `text`: button with text content instead of icon x05, x1, etc...
-   */
-  scaleButtonType: 'img';
-  /** Show floor number endings in floors locale translation */
-  floorNumberEndingsVisible: false;
-  /**
-   * Design type
-   * - `standard`: bottom panel without sidebar, external floors select
-   * - `sidebar`: all buttons in sidebar, also floors select in sidebar
-   * - `custom`: use `bottombarContent` and `sidebarContent` to select required buttons manually
-   */
-  designType: 'sidebar';
-  /** Bottom container button types to show */
-  bottombarContent: [];
-  /** Sidebar button types to show */
-  sidebarContent: ['floors', 'ruler', 'scale', 'rotation', 'furniture'];
-  /**
-   * Buttons design version
-   * - `two`: buttons design v2.0
-   * - `three`: buttons design v3.0
-   */
-  tabsButtonsDesign: 'three';
-  /** Proactive cursor type: 'pointer' or 'circle' */
-  cursor: 'pointer';
-  /** Enable/disable proactive cursor pulse */
-  enableCursorPulse: true;
-  /** Widget external integrations */
-  integrations: {
-    /** Configuration options for the Sentry Browser SDK. See: Sentry API BrowserOptions */
-    sentry: BrowserOptions;
-  };
-  /** Allows movement only within a room or between rooms, can be interroom or intraroom */
-  movementType: 'interroom';
-  /** Options for DefaultLink graphics */
-  default_link_options: {
-    /** Use perspective size for DefaultLink sprite */
-    use_real_size: false;
-    /** Perspective size */
-    real_size: 300;
-    /** Perspective size scale on mobile devices */
-    real_size_mobile_scale: 1;
-    /** Minimal distance to prevent overscale in near distances */
-    real_size_min_distance: 100;
-    /** Minimal distance scale clamp on near distances */
-    real_size_distance_min_scale: 0.1;
-    /** Enable/disable scale on hover */
-    hover_scale: 1.2;
-  };
-  /** Panorama fading options */
-  fade_options: {
-    /** Time for fade in (seconds) */
-    fade_in_time: 0.5;
-    /** Time for fade out (seconds) */
-    fade_out_time: 0.5;
-  };
-  /** Options for DefaultLink graphics */
-  ruler_options: {
-    /** Font size for ruler text */
-    font_size: 38;
-  };
-  /** Options for DefaultLink graphics */
-  link_options: {
-    /** Enable/disable link pulse on hover */
-    enable_pulse: false;
-    /** Pulse scale from */
-    pulse_from_scale: 1;
-    /** Pulse scale to */
-    pulse_to_scale: 2;
-    /** Pulse speed */
-    pulse_speed: 1;
-    /** Enable/disable scale on hover */
-    enable_point_hover_scale: false;
-    /** Hover scale */
-    point_hover_scale: 1;
-  };
-  /** Options for DefaultLink graphics */
-  map_options: {
-    /** Map type, should be 'default', 'top_view' or 'multi_floor' */
-    type: 'default';
-    /** Upscale top view resolution for better rendering */
-    top_view_upscale: 2;
-    /** Crop transparent bounds in multimap */
-    crop_transparent?: true;
-  };
-  /** Options for Scene camera */
-  camera_options: {
-    /** Speed of fov changing per deltaTime */
-    fov_change_speed?: 0;
-  };
-  /** Options for Portal link graphics */
-  portal_options?: {
-    /** Use overlay div elements instead of three.js graphics */
-    use_overlay?: true;
-    /** Generate portals from stairs */
-    generate_from_stairs?: true;
-  };
-  /** Options for DefaultLink graphics */
-  lazy_load_options: {
-    /** Count panoramas to lazy load after move to another panorama */
-    preload_count: 3;
-    /** Force lazy load another non-loaded panoramas instead of skipping near cached panoramas */
-    force_preload_non_cached: true;
-    /** Preload depth maps */
-    use_masks_preload: true;
-  };
-  /** Widget branding data */
-  widget_branding: {
-    /** Branded logo path */
-    logo_path: 'https://es-logos.com/logo.png';
-    /** Branded company name */
-    company_name: 'ES Company';
-    /** Branded company url */
-    company_url: 'https://es.company.com';
-    /** Branded widget language (See locale/*) */
-    widget_language: 'es';
+```json
+{
+  // Widget API base URL
+  "baseUrl": "https://backend.estate.hart-digital.com",
+  // Widget locale can be one of
+  // "en" - English language
+  // "ru" - Russian language
+  // "de" - German language
+  // "es" - Spanish language
+  // "ja" - Japanese language
+  "locale": "en",
+  // Overrides locale keys with custom text or translation
+  "localeOverrides": {
+    "create-points": "Create a point",
+    "delete-points": "Remove point",
+    "research-plan": "Research plan",
+    "rotate-plan": "Rotate plan",
+    "ok": "Ok",
+    "ruler-ok": "Ok",
+    "made-by-link": "https://getfloorplan.com/",
+    "made-by-text": "getfloorplan.com",
+    "floor": "$0 floor",
+    "floorNumberEndings": {
+      "1": "$0st",
+      "2": "$0nd",
+      "3": "$0d",
+      "rest": "$0th"
+    }
+  },
+  // Path/link to the logo
+  "logoUrl": "https://getfloorplan.com/img/logo.58f6cd11.svg",
+  // Link opened when logo is clicked
+  "logoLinkUrl": "https://getfloorplan.com",
+  // Widget color settings in CSS color formal like: "rgba(255, 255, 255, 0)", "#ABCDEF", etc...
+  // "main" - main color of buttons, elements
+  // "mainText" - text color for buttons, elements contrasting with the main color
+  "colors": {
+    "main": "#FFA900",
+    "mainText": "#413E3E"
+  },
+  // First opened tab
+  "primaryTab": "panorama",
+  // Available widget tabs array with order:
+  // "panorama" - Panorama 360 tab
+  // "rotation" - Isometric plan rotation tab
+  // "plan" - Original plan tab
+  "tabs": ["plan", "rotation", "panorama"],
+  // Controls in bottom bar, can be:
+  // "ruler" - Ruler enable/disable button
+  // "scale" - Scale x1, x2, x0.5 button
+  // "autoRotate" - Auto rotate enable/disable button
+  "controls": ["ruler", "scale", "autoRotate"],
+  // Enable/disable modal of instruction in 3D tour
+  "isInstructionsVisible": true,
+  // Enable/disable auto rotation in 3D tour
+  "isAutoRotate": false,
+  // Enable/disable device gyroscope for AR
+  "isGyroscopeEnabled": true,
+  // Show/hide fullscreen button
+  "isFullscreenButtonVisible": true,
+  // Show/hide current room type top label
+  "isRoomLabelVisible": false,
+  // Camera persective FOV
+  "cameraFov": 75,
+  // Panorama fade time in seconds
+  "panoramaFadeTime": 0.5,
+  // Widget external integrations
+  "integrations": {
+    // https://docs.sentry.io/platforms/javascript/configuration/options/
+    "sentry": {
+      "dsn": "https://1234567890abcdef@sentry.com/12345"
+    }
   }
-  /** Show/hide fullscreen button */
-  fullscreen_button_visible: false;
-  /** Show/hide room type label */
-  room_label_visible: false;
-};
-```
-## Types of elements
-```js
-tabs: [
-  'rotation', // circular view images (order is mandatory)
-  'panorama', // 360° images
-],
-rotationMode: [
-  rotationModes.DEFAULT, // top view mode (multiple perspectives) and stylized plan view
-  rotationModes.THREESIXTY, // image scrolling mode for circular view
-],
-floors[0].rotate.type: [
-  'top_down', // full model
-  'middle_cut', // model with cut in the middle
-],
-floors[0].panorama.type: [
-  'sphere', // 360° panorama
-  'cube', // panorama with 6 images (top, down, left, right, front, back)
-],
-locale: [
-  'ru', // Russian language
-  'en', // English language
-  'es', // Spanish language
-  'de', // German language
-  'ja', // Japanese language
-],
-scales: [
-  'x05',
-  'x075',
-  'x1',
-  'x125',
-  'x2',
-],
+}
 ```
 ## Widget object from the REST API
@@ -410,43 +255,63 @@ scales: [
 JSON object returned from backend
 ```js
-name: "", // CRM plan ID (only for CRM API)
-original_plan_img: "", // deprecated, path to the original plan image
-original_plans_img: [ // array of paths to the original plan images
-  ""
-],
-styled_plan_img: "", // path to the styled plan image
-top_view_img: "", // path to the top view image
-json: { // JSON with data for 3D tour
-  type: "furniture", // type of JSON (furniture, neural)
-  value: "" // path to JSON
-},
-panorama: { // type of panorama and paths to 360° images
-  type: "sphere", // 360° panorama or 'cube' for 6 images
-  items: {
-    [
-      camera_id: "" // camera ID for panorama
-      room_id: "" // room ID for panorama
-      images: [ // array of paths to 360° sphere and sides of the cube if type is cube
-        sphere: "",
-        front: null,
-        back: null,
-        left: null,
-        right: null,
-        top: null,
-        bottom: null,
-        scene_depth: "", // path to EXR file for depth map if available
-        object_ids: "", // path to EXR file for furniture object ids if available
-      ]
-    }
-  ]
-},
-rotate: { // type of images and paths to circular view images
-  type: "top_down", // full model or model with cut in the middle ('middle_cut')
-  items: [ // array of paths to circular view images
-    ""
-  ]
-}
+export default {
+  primary_variant: "<id>", // primary variant to open
+  variants: [              // all plan variants
+    {
+      variant_info: {
+        style_name: "<name>",          // the name of the variant style
+        is_renovation: true,           // is there a renovation in the plan
+      },
+      plan_id: "<uuid>",               // variant service plan uuid
+      json: "<url>",                   // json url for additional plan data
+      assets_path: "<path>",           // plan assets base url
+      capabilities: { /*...*/ },       // plan capabilities
+      rendering_settings: { /*...*/ }, // plan rendering settings
+      primary_floor: 0,                // primary plan floor index
+      floors: [                        // plan floors
+        {
+          original_plan_img: "<url>",           // absolute path to original plan image
+          miniplan_img: "<url>",                // absolute path to miniplan image
+          top_view: {
+            image_template: "<template>",       // template for top view decoding
+            room_ids_template: "<template>",    // template for top view mask decoding
+            items: ["<filename>"],              // top view image names
+          },
+          isometric_view: {
+            image_template: "<template>",       // template for isometric images decoding
+            room_ids_template: "<template>",    // template for isometric images masks decoding
+            items: ["<filename>"],              // isometric images names
+          },
+          panorama_view: {
+            template: "<template>",             // template for panorama image decoding
+            scene_depth_template: "<template>", // template for panorama depth image decoding
+            primary_camera_point_id: "<id>",    // primary plan camera id
+          },
+          location: { X: 0, Y: 0, Z: 0 },        // floor location
+          height: 280,                           // floor height
+          vertices: [ /*...*/ ],                 // plan vertices data
+          rooms: [ /*...*/ ],                    // plan rooms data
+          camera_points: [ /*...*/ ],            // plan camera points data
+          walls: [ /*...*/ ],                    // plan walls data
+          doors: [ /*...*/ ],                    // plan doors data
+          stairs: [ /*...*/ ],                   // plan stairs data
+          portals: [ /*...*/ ],                  // plan portals data
+          apertures: [ /*...*/ ],                // plan apertures data
+          decors: [ /*...*/ ],                   // plan decors data
+          object_pairs: [],                      // color pairs for furniture data
+          room_pairs: [],                        // color pairs for room data
+          plan_meta: { /*...*/ },                // plan metadata
+        },
+      ],
+    },
+  ],
+};
 ```
 # Versioning