@roomle/embedding-lib 4.37.0 → 4.40.0

package/docs/md/web/ui/EMBEDDING-CHANGELOG.md

@@ -1,6 +1,18 @@
-## [4.37.0](https://gitlab.com/roomle/web/roomle-ui/compare/embedding-v4.36.0...embedding-v4.37.0) (2022-06-09)
+## [4.40.0](https://gitlab.com/roomle/web/roomle-ui/compare/embedding-v4.39.0...embedding-v4.40.0) (2022-08-02)
 
 
 ### Features
 
-* upgrade SDK to 2.34.0 ([c222dce](https://gitlab.com/roomle/web/roomle-ui/commit/c222dce6720fe07d7ded3eee3fe5ea23eaf246c0))
+* add new structure for embedding docu ([8e3a563](https://gitlab.com/roomle/web/roomle-ui/commit/8e3a56324c345d2d45d6202415109e5629477224))
+* add setting for multi select materials ([15cbc21](https://gitlab.com/roomle/web/roomle-ui/commit/15cbc21af7a123ceb90bf7f2f7b6c94e89d13664))
+* **SDK:** upgrade to version 2.36.0-alpha.4 ([2317abf](https://gitlab.com/roomle/web/roomle-ui/commit/2317abf9349aff15705e13fcaf97ce9a0555ef53))
+* **SDK:** upgrade to version 2.36.0-alpha.5 ([10a31d2](https://gitlab.com/roomle/web/roomle-ui/commit/10a31d262362ed6523d62fedd43a18f2aa34568d))
+
+
+### Bug Fixes
+
+* add margin to height header on desktop ([8065114](https://gitlab.com/roomle/web/roomle-ui/commit/80651140541044ec1236ad8f08a5dc10d8a13e03))
+* embedding moc should display start planner button instead of action and bottom buttons ([831cd91](https://gitlab.com/roomle/web/roomle-ui/commit/831cd91f016f06b26131da82583b48393d976836))
+* extended callbacks should be added in planner and configurator ([6bcb1e5](https://gitlab.com/roomle/web/roomle-ui/commit/6bcb1e50133717dd073f587ea2a82cac998dc9da))
+* try to remove the Conflicting order in the UI project build in gitlab ([7ce8d42](https://gitlab.com/roomle/web/roomle-ui/commit/7ce8d428514d0202afc205b3944494aa57c79434))
+* tslint error ([54fa29e](https://gitlab.com/roomle/web/roomle-ui/commit/54fa29eb2d0dac0df702693914c7b3880ebc1c26))

package/docs/migration-guides/v2-to-v3.md

@@ -17,7 +17,7 @@ This has some implications:
 
 * to create this overlay, the Roomle Configurator has to be in control of all the DOM elements which are needed to expand over the whole page. Therefore things like the footer are now within the iframe and not custom made by the website or webshop. This makes embedding the Roomle Configurator easier because you do not have to wire up all the events and callbacks to create user interface elements like the footer. On the other hand, this also means that old parts of the embedding need to be removed from your website or webshop and re-thought.
 * also it is important to note that there shouldn't be elements with a higher z-index as the Roomle Configurator because the correct z-indices are needed for the full-page mode.
-* there is a back button which closes the full-page mode. If you need to listen to the event when the user clicks the back button this is possible and described in the section [react on button clicks](../index.md#react-on-button-clicks) in the docu.
+* there is a back button which closes the full-page mode. If you need to listen to the event when the user clicks the back button this is possible and described in the section [react on button clicks](../integration.md#react-on-button-clicks) in the docu.
 
 With the new version, it is essential that you use the correct `configurator id`. You should get the configurator id from your Roomle contact person. This is important because of two reasons:
 
@@ -132,4 +132,4 @@ To make the embedding easier we slimmed down the API surface of the configurator
 
 We especially simplified the skinning options because we think that the current user interface is very "neutral" and should fit with slight adjustments to most of the websites and webshops out there. If there is a strong demand for huge user interface adjustments and changes we can offer the Roomle Web SDK or forking of the UI repo. If this is really needed please speak with your Roomle contact person.
 
-Because the user interface changed completely it's also a good time to rethink how the Roomle Configurator is embedded into your website or webshop. Therefore we recommend to read through the new docu and explore the new possibilities which the new configurator gives you. You can find the [new docu here](../index.md)
+Because the user interface changed completely it's also a good time to rethink how the Roomle Configurator is embedded into your website or webshop. Therefore we recommend to read through the new docu and explore the new possibilities which the new configurator gives you. You can find the [new docu here](../integration.md)

package/docs/moc/index.md

@@ -0,0 +1,86 @@
+---
+hide_title: true
+title: "Multi-object Configurator"
+---
+
+# Multi-object Configurator
+
+The Multi-object Configurator allows you to configure not only one object but several objects in relation to each other.
+
+## Enable multi-object configuration
+
+To enable MoC:
+
+- To enable multi-object configuration, you need to add and set the `moc` flag in the `Rubens settings` to true
+  ([see Rubens Admin documentation](https://docs.roomle.com/web/datamanagement/administration.html#rubens-settings)).
+  When this flag is set, all configurators in the tenant are automatically multi-object configurators.
+
+## Setup the catalog structure
+
+To offer a set of products in the MoC they must be stored in a catalog and tagged accordingly.
+To display the products and divide them into categories, the tags must be structured correctly.
+
+Each tag can be used as root tag for the MoC.
+A sub-tag must be created for each category and each product that corresponds to this category must be tagged with it.
+The tag structure could then look like this:
+
+    1 moc_catalog (root-tag) 
+    2  |
+    3  ├── Fences (sub-tag 1)
+    4  |
+    5  ├── Couch Tables (sub-tag 2)
+    6  |
+    7  ├── Outdoor Tables (sub-tag 3)
+    8  |
+    9  └── Sofas (sub-tag 4)
+
+Also see Tags documentation: <https://docs.roomle.com/web/datamanagement/catalogs.html#tags>
+
+By tagging the products in the catalog, you can add them to the scene by clicking the "Add Product" button.
+
+## Integration
+
+To embed or integrate the MoC, the following parameters must be included in the URL
+
+- configuratorId: The configurator ID of the tenant where you enabled the MoC
+- catalogRootTag: The tag of the catalog where you stored the products you want to show in the MoC, Alternatively you
+  could also set the root-tag ID as catalogRootTag in your Rubens settings.
+- moc: Enable the MoC feature in the Rubens settings or via integration.
+
+Also see integration documentation: <https://docs.roomle.com/web/embedding/#embedding-integration>
+
+### Embedding:
+
+If you are using the embedding lib you have to call `createPlanner` instead of `create` or `createConfigurator` to load
+a MoC scene.
+
+## Recipes
+
+### Adding items to the scene
+
+It’s possible to add additional products/items/configurations to the scene using the `insertObject` API:
+
+```typescript
+await interface.ui.insertObject('usm:frame');
+```
+
+By default the object is placed somewhere where it does not overlap with other items in the scene. You can also supply a
+position and a rotation for the object in the scene:
+
+```typescript
+await interface.ui.insertObject('usm:frame', {x: -3, y: 0, z: 3}, Math.PI);
+```
+
+Position (2nd parameter) is in meters and the rotation (3rd parameter) is in radians.
+
+### Gets called when something is changed in the plan
+
+It is possible to implement a behavior which gets called when there is something changed in the plan. It gets all
+objects of the plan as parameter.
+
+```typescript
+interface
+
+.
+ui.callbacks.onPlanUpdate = (objects) => doSomething;
+```

package/docs/simple.md

@@ -1,6 +1,6 @@
 # Embedding
 
-To embed Roomle Rubens as an iframe in your website or webshop it is enough to create a link and use this link as a `src` in an iframe.  It is important to note that we recommend this typ of integration for static items or very simple use cases. This is due to the fact that this simplistic iframe integration does not communicate anything to your website or webshop. This could become problematic when you want to hand over customized products to the shopping cart. If you need deeper integration you can use our [embedding integration](./index) or even [the Web Sdk](../guides/getting-started/preface) (in case you want to heavily modify our user interface).
+To embed Roomle Rubens as an iframe in your website or webshop it is enough to create a link and use this link as a `src` in an iframe.  It is important to note that we recommend this typ of integration for static items or very simple use cases. This is due to the fact that this simplistic iframe integration does not communicate anything to your website or webshop. This could become problematic when you want to hand over customized products to the shopping cart. If you need deeper integration you can use our [embedding integration](./integration) or even [the Web Sdk](../guides/sdk/preface) (in case you want to heavily modify our user interface).
 
 ## Questions
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@roomle/embedding-lib",
-  "version": "4.37.0",
+  "version": "4.40.0",
   "main": "roomle-configurator-api.es.min.js",
   "types": "types/index.d.ts",
   "author": "Roomle Development",
   "dependencies": {
-    "@roomle/web-sdk": "2.34.0"
+    "@roomle/web-sdk": "2.36.0-alpha.5"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",

package/types/index.d.ts

@@ -72,7 +72,8 @@ declare module "configurator/embedding/types" {
         PARTLIST_PLANNER = "partlist_planner",
         PRODUCTLIST = "productlist",
         TWO_D_VIEW = "2dview",
-        ADD_ROOM = "add_room"
+        ADD_ROOM = "add_room",
+        STARTPLANNER = "startPlanner"
     }
     interface FeatureFlags {
         realPartList?: boolean;
@@ -102,6 +103,7 @@ declare module "configurator/embedding/types" {
             [UI_BUTTON.TWO_D_VIEW]?: boolean;
             [UI_BUTTON.PARTLIST_PLANNER]?: boolean;
             [UI_BUTTON.ADD_ROOM]?: boolean;
+            [UI_BUTTON.STARTPLANNER]?: boolean;
         };
         skin?: EmbeddingSkin;
         zIndex?: number;
@@ -179,6 +181,11 @@ declare module "configurator/embedding/types" {
          * default: true
          */
         applyCurrentGlobalParameters?: boolean;
+        /**
+         * set this flag to true if you want that a user can select more than one material category at once
+         * default: false
+         */
+        materialMultiSelect?: boolean;
     }
     export interface EmbeddingSkin {
         'primary-color'?: string;
@@ -197,7 +204,7 @@ declare module "configurator/embedding/types" {
 }
 declare module "configurator/embedding/exposed-callbacks" {
     import { Base64Image } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
-    import { KernelPartList } from '@roomle/web-sdk/lib/definitions/typings/kernel';
+    import { KernelPartList, UiPlanObject } from '@roomle/web-sdk/lib/definitions/typings/kernel';
     import { RapiConfigurationEnhanced } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
     import { UI_BUTTON } from "configurator/embedding/types";
     import { Nullable } from "common/utils/types";
@@ -235,6 +242,12 @@ declare module "configurator/embedding/exposed-callbacks" {
          */
         onButtonClicked: (name: UI_BUTTON) => Promise<boolean> | boolean | void;
         onRequestPlan: (planId: string, image: Base64Image, items: any[]) => void;
+        /**
+         * Gets called if a plan object gets added, changed or removed
+         * Only the move of plan object does NOT trigger this function
+         * @param objects
+         */
+        onPlanUpdate: (objects: UiPlanObject[]) => void;
     }
 }
 declare module "configurator/store/core-state" {
@@ -435,7 +448,7 @@ declare module "common/store/common-ui-state" {
     import { RapiId } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
     export interface CommonUiState {
         isInIframe: boolean;
-        isViewOnly: boolean;
+        isViewOnly: Nullable<boolean>;
         lastRequestedId: Nullable<RapiId>;
     }
     export const initialState: CommonUiState;
@@ -453,7 +466,6 @@ declare module "planner/utils/planner-sidebar" {
     import { SdkConnector } from "configurator/business-logic/sdk-connector";
     import { RapiConfiguration, RapiItem } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
     export interface PlannerSidebarState {
-        welcome: boolean;
         catalog: boolean;
         productList: boolean;
         partList: boolean;
@@ -490,7 +502,6 @@ declare module "planner/store/planner-ui-state" {
         lastWalls: KernelWall[];
     }
     export enum PLANNER_UI_STATE_MUTATIONS {
-        SET_SELECTION_PAYLOAD = "PLANNER_UI_STATE_setSelectionPayload",
         SET_SELECTION = "PLANNER_UI_STATE_setSelection",
         SET_IS_LANDSCAPE = "PLANNER_UI_STATE_setIsLandscape",
         SET_INTERACTIONS_EXPANDED = "PLANNER_UI_STATE_setInteractionsExpanded",
@@ -512,7 +523,9 @@ declare module "planner/store/planner-ui-state" {
     export enum PLANNER_UI_STATE_ACTIONS {
         SELECT_VIEW_MODE = "PLANNER_UI_STATE_SELECT_VIEW_MODE",
         SET_INTERACTIONS_EXPANDED = "PLANNER_UI_STATE_SET_INTERACTIONS_EXPANDED",
-        DESELECT_SIDEBAR_ACTION_BUTTONS = "DESELECT_SIDEBAR_ACTION_BUTTONS"
+        DESELECT_SIDEBAR_ACTION_BUTTONS = "DESELECT_SIDEBAR_ACTION_BUTTONS",
+        CLEAR_AND_CLOSE_SIDEBAR = "CLEAR_AND_CLOSE_SIDEBAR",
+        SET_SELECTION_PAYLOAD = "PLANNER_UI_STATE_setSelectionPayload"
     }
     export enum PLANNER_UI_STATE_GETTERS {
         CATALOG_ROOT_TAG = "PLANNER_UI_STATE_CATALOG_ROOT_TAG",
@@ -528,11 +541,13 @@ declare module "common/store/collection-view-state" {
     import { Nullable } from "common/utils/types";
     import { CollectionViewElement } from "common/components/collection-view/-utils/types";
     import { StoreState } from "common/store/index";
+    export type ViewTypeState = 'listView' | 'gridViewSmall' | 'gridViewBig';
     export interface GridViewUiState {
         filter: string[];
-        showAllAsList: boolean;
         search: Nullable<string>;
         userInitiatedSearch: boolean;
+        viewType: ViewTypeState;
+        hasGroupLabel: boolean;
     }
     export interface CollectionViewUiState {
         selected: Nullable<CollectionViewElement>;
@@ -540,6 +555,7 @@ declare module "common/store/collection-view-state" {
         gridView: GridViewUiState;
     }
     export const getInitialCollectionViewState: () => CollectionViewUiState;
+    export const getInitialViewType: () => ViewTypeState;
     export enum COLLECTION_VIEW_STATE_MUTATIONS {
         ELEMENT_EXPANDED = "CV_ELEMENT_EXPANDED",
         SET_SELECTED_ELEMENT = "CV_SET_SELECTED_ELEMENT",
@@ -547,9 +563,11 @@ declare module "common/store/collection-view-state" {
     }
     export enum GRID_VIEW_STATE_MUTATIONS {
         SET_SEARCH = "GV_SET_SEARCH",
-        TOGGLE_LIST_DISPLAY_TYPE = "GV_TOGGLE_LIST_DISPLAY_TYPE",
         TOGGLE_FILTER = "GV_TOGGLE_FILTER",
-        SET_USER_INITIATED_SEARCH = "GV_SET_USER_INITIATED_SEARCH"
+        SET_USER_INITIATED_SEARCH = "GV_SET_USER_INITIATED_SEARCH",
+        SET_VIEW_TYPE = "SET_VIEW_TYPE",
+        SET_HAS_GROUP_LABEL = "SET_HAS_GROUP_LABEL",
+        RESET_FILTER = "RESET_FILTER"
     }
     interface MuationPayload<T, V> {
         state: T;
@@ -631,6 +649,7 @@ declare module "configurator/store/ui-state" {
         redoEnabled: boolean;
         undoEnabledPlanner: boolean;
         redoEnabledPlanner: boolean;
+        materialMultiSelect: boolean;
     }
     export enum UI_STATE_MUTATIONS {
         SET_SELECTED_GROUP = "setSelectedGroup",
@@ -741,7 +760,6 @@ declare module "common/store/index" {
         SET_IS_IN_IFRAME: COMMON_UI_STATE_MUTATIONS.SET_IS_IN_IFRAME;
         SET_IS_VIEW_ONLY: COMMON_UI_STATE_MUTATIONS.SET_IS_VIEW_ONLY;
         SET_LAST_REQUESTED_ID: COMMON_UI_STATE_MUTATIONS.SET_LAST_REQUESTED_ID;
-        SET_SELECTION_PAYLOAD: PLANNER_UI_STATE_MUTATIONS.SET_SELECTION_PAYLOAD;
         SET_SELECTION: PLANNER_UI_STATE_MUTATIONS.SET_SELECTION;
         SET_IS_LANDSCAPE: PLANNER_UI_STATE_MUTATIONS.SET_IS_LANDSCAPE;
         SET_INTERACTIONS_EXPANDED: PLANNER_UI_STATE_MUTATIONS.SET_INTERACTIONS_EXPANDED;
@@ -942,6 +960,7 @@ declare module "configurator/business-logic/roomle-sdk-wrapper" {
     import { GlobalInitDataDefinition } from '@roomle/web-sdk/lib/definitions/common-core/src/utils/shims';
     import { Planner } from '@roomle/web-sdk/lib/definitions/planner-core/src/planner';
     import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
+    import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
     /**
      * We use this class in a plugin so we
      * can rely on DI to change it during testing
@@ -953,6 +972,7 @@ declare module "configurator/business-logic/roomle-sdk-wrapper" {
         private _currentInstance;
         get hasPlanner(): boolean;
         getConfigurator(element: HTMLElement, initData?: UiInitData): Promise<Configurator>;
+        getConfiguratorApi(element: HTMLElement, initData?: UiInitData): Promise<RoomleConfigurator>;
         getGlbViewer(element: HTMLElement, initData?: UiInitData): Promise<GlbViewer>;
         getPlanner(element: HTMLElement, initData?: UiInitData): Promise<Planner>;
         getRapiAccess(): Promise<RapiAccess>;
@@ -988,19 +1008,28 @@ declare module "configurator/business-logic/ui-callback" {
         onSelectionCancel: () => any;
     }
 }
+declare module "common/business-logic/connector" {
+    import { RoomleSdkWrapper } from "configurator/business-logic/roomle-sdk-wrapper";
+    import { UiInitData } from "configurator/embedding/types";
+    import { CallbackApi } from "configurator/business-logic/sdk-connector";
+    export abstract class Connector {
+        abstract readonly api: Promise<any>;
+        abstract init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
+        addCallback<K extends keyof CallbackApi>(key: K, fun: CallbackApi[K], allowMultiple?: boolean): Promise<void>;
+    }
+}
 declare module "configurator/business-logic/sdk-connector-configurator" {
     import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
     import { Nullable } from "common/utils/types";
-    import { Connector } from "configurator/business-logic/sdk-connector";
     import { UiInitData } from "configurator/embedding/types";
     import { StoreState } from "common/store/index";
     import { KernelParameter } from '@roomle/web-sdk/lib/definitions/typings/kernel';
-    import ConfiguratorUiCallbacks from '@roomle/web-sdk/lib/definitions/configurator-core/src/services/configurator-ui-callback';
     import { Store } from 'vuex';
     import { RoomleSdkWrapper } from "configurator/business-logic/roomle-sdk-wrapper";
     import { Analytics } from "common/plugins/analytics";
     import { UiCallbacks } from "configurator/business-logic/ui-callback";
-    export class SdkConnectorConfigurator implements Connector {
+    import { Connector } from "common/business-logic/connector";
+    export class SdkConnectorConfigurator extends Connector {
         private _configurator;
         private _initWaiters;
         private _store;
@@ -1009,8 +1038,7 @@ declare module "configurator/business-logic/sdk-connector-configurator" {
         constructor(store: Store<StoreState>, analytics?: Nullable<Analytics>);
         get api(): Promise<RoomleConfigurator>;
         init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
-        initConfigurator(configurator: RoomleConfigurator): void;
-        addCallback<K extends keyof ConfiguratorUiCallbacks>(key: K, fun: ConfiguratorUiCallbacks[K], allowMultiple?: boolean): void;
+        initConfigurator(configurator: RoomleConfigurator): Promise<void>;
         setParameter(parameter: KernelParameter, value: string, isRaw?: boolean): Promise<void>;
         setPrice(currencySymbol: string, price: number): void;
         addUiCallback(listener: UiCallbacks): void;
@@ -1022,7 +1050,6 @@ declare module "configurator/business-logic/sdk-connector-configurator" {
     }
 }
 declare module "viewer/business-logic/sdk-connector-viewer" {
-    import { Connector } from "configurator/business-logic/sdk-connector";
     import { Nullable } from "common/utils/types";
     import { Store } from 'vuex';
     import { StoreState } from "common/store/index";
@@ -1030,7 +1057,8 @@ declare module "viewer/business-logic/sdk-connector-viewer" {
     import { RoomleSdkWrapper } from "configurator/business-logic/roomle-sdk-wrapper";
     import { UiInitData } from "configurator/embedding/types";
     import RoomleGLBViewer from '@roomle/web-sdk/lib/definitions/glb-viewer-core/src/roomle-glb-viewer';
-    export class SdkConnectorViewer implements Connector {
+    import { Connector } from "common/business-logic/connector";
+    export class SdkConnectorViewer extends Connector {
         private _viewer;
         private _initWaiters;
         private _store;
@@ -1050,7 +1078,6 @@ declare module "common/utils/plan" {
     export const EMPTY_PLAN = "<plan version=\"2\"><walls><nodes/><edges/></walls><planobjects/><texters/><measures/><floors/><transparency><layers/></transparency></plan>";
 }
 declare module "planner/business-logic/sdk-connector-planner" {
-    import { Connector } from "configurator/business-logic/sdk-connector";
     import { Nullable } from "common/utils/types";
     import { Store } from 'vuex';
     import { StoreState } from "common/store/index";
@@ -1060,7 +1087,8 @@ declare module "planner/business-logic/sdk-connector-planner" {
     import RoomlePlanner from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
     import { RapiId, RapiPlan } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
     import { Base64Image } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
-    export class SdkConnectorPlanner implements Connector {
+    import { Connector } from "common/business-logic/connector";
+    export class SdkConnectorPlanner extends Connector {
         private _planner;
         private _initWaiters;
         private _store;
@@ -1071,7 +1099,7 @@ declare module "planner/business-logic/sdk-connector-planner" {
         constructor(store: Store<StoreState>, analytics?: Nullable<Analytics>);
         get api(): Promise<RoomlePlanner>;
         init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
-        initPlanner(planner: RoomlePlanner): void;
+        initPlanner(planner: RoomlePlanner): Promise<void>;
         loadPlan(id: RapiId): Promise<void>;
         loadPlanBasedOnObjectId(id: RapiId): Promise<void>;
         onSelectionCancel(): void;
@@ -1100,6 +1128,7 @@ declare module "configurator/business-logic/sdk-connector" {
     import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
     import { UiCallbacks } from "configurator/business-logic/ui-callback";
     import { Base64Image } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
+    import RoomlePlannerUiCallback from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner-ui-callback';
     export enum SDK_MODULES {
         VIEWER = 0,
         CONFIGURATOR = 1,
@@ -1116,11 +1145,8 @@ declare module "configurator/business-logic/sdk-connector" {
         partList: KernelPartList;
     }
     export const getSelectableEntry: (selected: Selectable, data: Selectable[]) => Nullable<Selectable>;
-    export const REGISTERED_CALLBACKS: Map<keyof ConfiguratorUiCallbacks, boolean>;
-    export interface Connector {
-        readonly api: any;
-        init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
-    }
+    export const REGISTERED_CALLBACKS: Map<keyof CallbackApi, boolean>;
+    export type CallbackApi = ConfiguratorUiCallbacks & RoomlePlannerUiCallback;
     export class SdkConnector {
         protected loadInProgress: boolean;
         protected someLoadDone: boolean;
@@ -1180,8 +1206,7 @@ declare module "configurator/business-logic/sdk-connector" {
         }): Promise<null>;
         loadConfiguration(configurationId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
         loadComponent(componentId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
-        loadSelectedPlanObject(): Promise<LoadResponse>;
-        loadPlanObjectId(configurationId: string, planObjectId: number): Promise<Nullable<LoadResponse>>;
+        loadSelectedPlanObject(): Promise<void>;
         loadConfigurationString(configurationString: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
         loadConfigurableItem(configurableItemId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
         isIdAGlb(id: string): Promise<boolean>;
@@ -1234,9 +1259,9 @@ declare module "configurator/embedding/exposed-api" {
     import { Nullable } from "common/utils/types";
     import { Analytics } from "common/plugins/analytics";
     import RoomleGLBViewer from '@roomle/web-sdk/lib/definitions/glb-viewer-core/src/roomle-glb-viewer';
-    import RoomlePlanner from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
     import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
     import { Position3 } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
+    import RoomlePlanner from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
     export class ExposedApi {
         private _sdk;
         private _exposedCallbacks;

package/types/src/common/business-logic/connector.d.ts

@@ -0,0 +1,8 @@
+import { RoomleSdkWrapper } from '@/configurator/business-logic/roomle-sdk-wrapper';
+import { UiInitData } from '@/configurator/embedding/types';
+import { CallbackApi } from '@/configurator/business-logic/sdk-connector';
+export declare abstract class Connector {
+    abstract readonly api: Promise<any>;
+    abstract init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
+    addCallback<K extends keyof CallbackApi>(key: K, fun: CallbackApi[K], allowMultiple?: boolean): Promise<void>;
+}

package/types/src/common/store/collection-view-state.d.ts

@@ -2,11 +2,13 @@ import { Module } from 'vuex';
 import { Nullable } from '@/common/utils/types';
 import { CollectionViewElement } from '@/common/components/collection-view/-utils/types';
 import { StoreState } from '@/common/store';
+export declare type ViewTypeState = 'listView' | 'gridViewSmall' | 'gridViewBig';
 export interface GridViewUiState {
     filter: string[];
-    showAllAsList: boolean;
     search: Nullable<string>;
     userInitiatedSearch: boolean;
+    viewType: ViewTypeState;
+    hasGroupLabel: boolean;
 }
 export interface CollectionViewUiState {
     selected: Nullable<CollectionViewElement>;
@@ -14,6 +16,7 @@ export interface CollectionViewUiState {
     gridView: GridViewUiState;
 }
 export declare const getInitialCollectionViewState: () => CollectionViewUiState;
+export declare const getInitialViewType: () => ViewTypeState;
 export declare enum COLLECTION_VIEW_STATE_MUTATIONS {
     ELEMENT_EXPANDED = "CV_ELEMENT_EXPANDED",
     SET_SELECTED_ELEMENT = "CV_SET_SELECTED_ELEMENT",
@@ -21,9 +24,11 @@ export declare enum COLLECTION_VIEW_STATE_MUTATIONS {
 }
 export declare enum GRID_VIEW_STATE_MUTATIONS {
     SET_SEARCH = "GV_SET_SEARCH",
-    TOGGLE_LIST_DISPLAY_TYPE = "GV_TOGGLE_LIST_DISPLAY_TYPE",
     TOGGLE_FILTER = "GV_TOGGLE_FILTER",
-    SET_USER_INITIATED_SEARCH = "GV_SET_USER_INITIATED_SEARCH"
+    SET_USER_INITIATED_SEARCH = "GV_SET_USER_INITIATED_SEARCH",
+    SET_VIEW_TYPE = "SET_VIEW_TYPE",
+    SET_HAS_GROUP_LABEL = "SET_HAS_GROUP_LABEL",
+    RESET_FILTER = "RESET_FILTER"
 }
 interface MuationPayload<T, V> {
     state: T;

package/types/src/common/store/common-ui-state.d.ts

@@ -4,7 +4,7 @@ import { Nullable } from '@/common/utils/types';
 import { RapiId } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
 export interface CommonUiState {
     isInIframe: boolean;
-    isViewOnly: boolean;
+    isViewOnly: Nullable<boolean>;
     lastRequestedId: Nullable<RapiId>;
 }
 export declare const initialState: CommonUiState;

package/types/src/common/store/index.d.ts

@@ -26,7 +26,6 @@ export declare const MUTATIONS: {
     SET_IS_IN_IFRAME: COMMON_UI_STATE_MUTATIONS.SET_IS_IN_IFRAME;
     SET_IS_VIEW_ONLY: COMMON_UI_STATE_MUTATIONS.SET_IS_VIEW_ONLY;
     SET_LAST_REQUESTED_ID: COMMON_UI_STATE_MUTATIONS.SET_LAST_REQUESTED_ID;
-    SET_SELECTION_PAYLOAD: PLANNER_UI_STATE_MUTATIONS.SET_SELECTION_PAYLOAD;
     SET_SELECTION: PLANNER_UI_STATE_MUTATIONS.SET_SELECTION;
     SET_IS_LANDSCAPE: PLANNER_UI_STATE_MUTATIONS.SET_IS_LANDSCAPE;
     SET_INTERACTIONS_EXPANDED: PLANNER_UI_STATE_MUTATIONS.SET_INTERACTIONS_EXPANDED;

package/types/src/common/utils/touch-drag.d.ts

@@ -1,5 +1,7 @@
 import { Nullable } from '@/common/utils/types';
 export declare const TOUCH_DRAG_TIMEOUT = 500;
+export declare const TOUCH_DRAG_DELAY = 75;
+export declare const TOUCH_DRAG_EPSILON = 10;
 export interface TouchDragCallbacks {
     onTouchDragStart: (payload: Nullable<any>, event: TouchEvent) => void;
 }
@@ -8,12 +10,15 @@ export declare class TouchDrag<Payload> {
     private _onTouchDragStart;
     private _payload;
     private _delay;
+    private _firstTouch;
+    private _lastTouch;
     constructor(payload: Payload, { onTouchDragStart }: TouchDragCallbacks, options?: {
         delay?: number;
     });
     onTouchStart(event: TouchEvent): void;
     onTouchEnd(): void;
-    onTouchMove(_event: TouchEvent): void;
+    onTouchMove(event: TouchEvent): void;
     private _clearTimeout;
     private _resetTouches;
+    private _checkXDistance;
 }

package/types/src/configurator/business-logic/roomle-sdk-wrapper.d.ts

@@ -6,6 +6,7 @@ import { UiInitData } from '@/configurator/embedding/types';
 import { GlobalInitDataDefinition } from '@roomle/web-sdk/lib/definitions/common-core/src/utils/shims';
 import { Planner } from '@roomle/web-sdk/lib/definitions/planner-core/src/planner';
 import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
+import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
 /**
  * We use this class in a plugin so we
  * can rely on DI to change it during testing
@@ -17,6 +18,7 @@ export declare class RoomleSdkWrapper {
     private _currentInstance;
     get hasPlanner(): boolean;
     getConfigurator(element: HTMLElement, initData?: UiInitData): Promise<Configurator>;
+    getConfiguratorApi(element: HTMLElement, initData?: UiInitData): Promise<RoomleConfigurator>;
     getGlbViewer(element: HTMLElement, initData?: UiInitData): Promise<GlbViewer>;
     getPlanner(element: HTMLElement, initData?: UiInitData): Promise<Planner>;
     getRapiAccess(): Promise<RapiAccess>;

package/types/src/configurator/business-logic/sdk-connector-configurator.d.ts

@@ -1,15 +1,14 @@
 import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
 import { Nullable } from '@/common/utils/types';
-import { Connector } from '@/configurator/business-logic/sdk-connector';
 import { UiInitData } from '@/configurator/embedding/types';
 import { StoreState } from '@/common/store';
 import { KernelParameter } from '@roomle/web-sdk/lib/definitions/typings/kernel';
-import ConfiguratorUiCallbacks from '@roomle/web-sdk/lib/definitions/configurator-core/src/services/configurator-ui-callback';
 import { Store } from 'vuex';
 import { RoomleSdkWrapper } from '@/configurator/business-logic/roomle-sdk-wrapper';
 import { Analytics } from '@/common/plugins/analytics';
 import { UiCallbacks } from '@/configurator/business-logic/ui-callback';
-export declare class SdkConnectorConfigurator implements Connector {
+import { Connector } from '@/common/business-logic/connector';
+export declare class SdkConnectorConfigurator extends Connector {
     private _configurator;
     private _initWaiters;
     private _store;
@@ -18,8 +17,7 @@ export declare class SdkConnectorConfigurator implements Connector {
     constructor(store: Store<StoreState>, analytics?: Nullable<Analytics>);
     get api(): Promise<RoomleConfigurator>;
     init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
-    initConfigurator(configurator: RoomleConfigurator): void;
-    addCallback<K extends keyof ConfiguratorUiCallbacks>(key: K, fun: ConfiguratorUiCallbacks[K], allowMultiple?: boolean): void;
+    initConfigurator(configurator: RoomleConfigurator): Promise<void>;
     setParameter(parameter: KernelParameter, value: string, isRaw?: boolean): Promise<void>;
     setPrice(currencySymbol: string, price: number): void;
     addUiCallback(listener: UiCallbacks): void;

package/types/src/configurator/business-logic/sdk-connector.d.ts

@@ -18,6 +18,7 @@ import { RapiConfigurationEnhanced, RapiPlan } from '@roomle/web-sdk/lib/definit
 import RoomleConfigurator from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
 import { UiCallbacks } from '@/configurator/business-logic/ui-callback';
 import { Base64Image } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
+import RoomlePlannerUiCallback from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner-ui-callback';
 export declare enum SDK_MODULES {
     VIEWER = 0,
     CONFIGURATOR = 1,
@@ -34,11 +35,8 @@ export interface PartlistResponse {
     partList: KernelPartList;
 }
 export declare const getSelectableEntry: (selected: Selectable, data: Selectable[]) => Nullable<Selectable>;
-export declare const REGISTERED_CALLBACKS: Map<keyof ConfiguratorUiCallbacks, boolean>;
-export interface Connector {
-    readonly api: any;
-    init(sdkWrapper: RoomleSdkWrapper, element: HTMLElement, initData: UiInitData): Promise<void>;
-}
+export declare const REGISTERED_CALLBACKS: Map<keyof CallbackApi, boolean>;
+export declare type CallbackApi = ConfiguratorUiCallbacks & RoomlePlannerUiCallback;
 export declare class SdkConnector {
     protected loadInProgress: boolean;
     protected someLoadDone: boolean;
@@ -98,8 +96,7 @@ export declare class SdkConnector {
     }): Promise<null>;
     loadConfiguration(configurationId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
     loadComponent(componentId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
-    loadSelectedPlanObject(): Promise<Nullable<LoadResponse>>;
-    loadPlanObjectId(configurationId: string, planObjectId: number): Promise<Nullable<LoadResponse>>;
+    loadSelectedPlanObject(): Promise<void>;
     loadConfigurationString(configurationString: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
     loadConfigurableItem(configurableItemId: string, initData?: UiInitData | undefined): Promise<Nullable<LoadResponse>>;
     isIdAGlb(id: string): Promise<boolean>;

package/types/src/configurator/embedding/exposed-api.d.ts

@@ -7,9 +7,9 @@ import { StoreState } from '@/common/store';
 import { Nullable } from '@/common/utils/types';
 import { Analytics } from '@/common/plugins/analytics';
 import RoomleGLBViewer from '@roomle/web-sdk/lib/definitions/glb-viewer-core/src/roomle-glb-viewer';
-import RoomlePlanner from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
 import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
 import { Position3 } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
+import RoomlePlanner from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
 export declare class ExposedApi {
     private _sdk;
     private _exposedCallbacks;

package/types/src/configurator/embedding/exposed-callbacks.d.ts

@@ -1,5 +1,5 @@
 import { Base64Image } from '@roomle/web-sdk/lib/definitions/common-core/src/common-interfaces';
-import { KernelPartList } from '@roomle/web-sdk/lib/definitions/typings/kernel';
+import { KernelPartList, UiPlanObject } from '@roomle/web-sdk/lib/definitions/typings/kernel';
 import { RapiConfigurationEnhanced } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
 import { UI_BUTTON } from '@/configurator/embedding/types';
 import { Nullable } from '@/common/utils/types';
@@ -37,4 +37,10 @@ export declare class ExposedCallbacks {
      */
     onButtonClicked: (name: UI_BUTTON) => Promise<boolean> | boolean | void;
     onRequestPlan: (planId: string, image: Base64Image, items: any[]) => void;
+    /**
+     * Gets called if a plan object gets added, changed or removed
+     * Only the move of plan object does NOT trigger this function
+     * @param objects
+     */
+    onPlanUpdate: (objects: UiPlanObject[]) => void;
 }