@node-projects/web-component-designer 0.0.56 → 0.0.60

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: jogibear9988

package/dist/commandHandling/CommandType.d.ts

@@ -21,5 +21,8 @@ export declare enum CommandType {
     'distributeHorizontal' = "distributeHorizontaly",
     'distributeVertical' = "distributeVertical",
     'setTool' = "setTool",
+    'setStrokeColor' = "setStrokeColor",
+    'setFillBrush' = "setFillBrush",
+    'setStrokeThickness' = "setStrokeThickness",
     'screenshot' = "screenshot"
 }

package/dist/commandHandling/CommandType.js

@@ -22,5 +22,8 @@ export var CommandType;
     CommandType["distributeHorizontal"] = "distributeHorizontaly";
     CommandType["distributeVertical"] = "distributeVertical";
     CommandType["setTool"] = "setTool";
+    CommandType["setStrokeColor"] = "setStrokeColor";
+    CommandType["setFillBrush"] = "setFillBrush";
+    CommandType["setStrokeThickness"] = "setStrokeThickness";
     CommandType["screenshot"] = "screenshot";
 })(CommandType || (CommandType = {}));

package/dist/elements/helper/CssAttributeParser.d.ts

@@ -5,5 +5,5 @@ export declare class CssEntry {
 }
 export declare class CssAttributeParser {
     entries: CssEntry[];
-    parse(text: string): void;
+    parse(text: string, quoteType?: string): void;
 }

package/dist/elements/helper/CssAttributeParser.js

@@ -14,7 +14,7 @@ export class CssEntry {
 }
 export class CssAttributeParser {
     entries = [];
-    parse(text) {
+    parse(text, quoteType = '\'') {
         this.entries = [];
         let name = '';
         let value = '';
@@ -38,7 +38,7 @@ export class CssAttributeParser {
                     token = Token.Name;
                 }
                 else {
-                    if (c === '\'') {
+                    if (c === quoteType) {
                         token = Token.InQuote;
                     }
                     value += c;
@@ -51,10 +51,13 @@ export class CssAttributeParser {
                     c = text[n];
                     value += c;
                 }
-                if (c === '\'') {
+                else if (c === quoteType) {
                     value += c;
                     token = Token.Value;
                 }
+                else {
+                    value += c;
+                }
             }
         }
         if (name.trim() !== '') {

package/dist/elements/helper/CssCombiner.js

@@ -1,6 +1,6 @@
 export class CssCombiner {
     static _helperElement = document.createElement('div');
-    //todo: inset, 
+    //todo: inset, flex flow, place content...
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
         e.setAttribute('style', '');

package/dist/elements/helper/GridHelper.js

@@ -1,8 +1,12 @@
 export function CalculateGridInformation(designItem) {
+    //todo:
+    //same name should combine columns/rows
     let itemRect = designItem.element.getBoundingClientRect();
     const computedStyle = getComputedStyle(designItem.element);
     const rows = computedStyle.gridTemplateRows.split(' ');
     const columns = computedStyle.gridTemplateColumns.split(' ');
+    const paddingLeft = Number.parseFloat(computedStyle.paddingLeft);
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop);
     let y = 0;
     let xGap = 0;
     let yGap = 0;
@@ -81,12 +85,12 @@ export function CalculateGridInformation(designItem) {
         for (let yIdx = 0; yIdx < columns.length; yIdx++) {
             const c = columns[yIdx];
             if (x > 0 && xGap) {
-                retVal.gaps.push({ x: x + xOffset, y: y + yOffset, width: xGap, height: currY });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: xGap, height: currY });
                 x += xGap;
             }
             const currX = Number.parseFloat(c.replace('px', ''));
             if (y > 0 && yGap) {
-                retVal.gaps.push({ x: x + xOffset, y: y + yOffset - yGap, width: currX, height: yGap });
+                retVal.gaps.push({ x: x + xOffset + paddingLeft, y: y + yOffset - yGap + paddingTop, width: currX, height: yGap });
             }
             let name = null;
             if (areas) {
@@ -95,7 +99,7 @@ export function CalculateGridInformation(designItem) {
                     name = nm;
                 }
             }
-            const cell = { x: x + xOffset, y: y + yOffset, width: currX, height: currY, name: name };
+            const cell = { x: x + xOffset + paddingLeft, y: y + yOffset + paddingTop, width: currX, height: currY, name: name };
             cellList.push(cell);
             x += currX;
             cl++;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,6 +45,9 @@ import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
 import { CopyPasteService } from './copyPasteService/CopyPasteService';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService';
+import { ButtonSeperatorProvider } from '../widgets/designerView/ButtonSeperatorProvider';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/GridExtensionDesignViewConfigButtons';
+import { DemoProviderService } from './demoProviderService/DemoProviderService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -65,6 +68,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("demoProviderService", new DemoProviderService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()
@@ -106,6 +110,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
     serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
     serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons());
     serviceContainer.designerContextMenuExtensions = [
         new CopyPasteContextMenu(),
         new ZMoveContextMenu(),

package/dist/elements/services/GlobalContext.d.ts

@@ -5,6 +5,7 @@ export declare class GlobalContext {
     private _serviceContainer;
     private _tool;
     private _strokeColor;
+    private _strokeThickness;
     private _fillBrush;
     constructor(serviceContainer: ServiceContainer);
     set tool(tool: ITool);
@@ -14,6 +15,9 @@ export declare class GlobalContext {
     set strokeColor(strokeColor: string);
     get strokeColor(): string;
     readonly onStrokeColorChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set strokeThickness(strokeThickness: string);
+    get strokeThickness(): string;
+    readonly onStrokeThicknessChanged: TypedEvent<PropertyChangedArgs<string>>;
     set fillBrush(fillBrush: string);
     get fillBrush(): string;
     readonly onFillBrushChanged: TypedEvent<PropertyChangedArgs<string>>;

package/dist/elements/services/GlobalContext.js

@@ -5,6 +5,7 @@ export class GlobalContext {
     _serviceContainer;
     _tool;
     _strokeColor = 'black';
+    _strokeThickness = '3';
     _fillBrush = 'transparent';
     constructor(serviceContainer) {
         this._serviceContainer = serviceContainer;
@@ -36,6 +37,17 @@ export class GlobalContext {
         return this._strokeColor;
     }
     onStrokeColorChanged = new TypedEvent();
+    set strokeThickness(strokeThickness) {
+        if (this._strokeThickness !== strokeThickness) {
+            const oldStrokeThickness = this._strokeThickness;
+            this._strokeThickness = strokeThickness;
+            this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness));
+        }
+    }
+    get strokeThickness() {
+        return this._strokeThickness;
+    }
+    onStrokeThicknessChanged = new TypedEvent();
     set fillBrush(fillBrush) {
         this._fillBrush = fillBrush;
         if (this._fillBrush !== fillBrush) {

package/dist/elements/services/ServiceContainer.d.ts

@@ -23,6 +23,8 @@ import { IDragDropService } from './dragDropService/IDragDropService';
 import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 import { IDesignerPointerExtensionProvider } from "../widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 import { IModelCommandService } from "./modelCommandService/IModelCommandService.js";
+import { IDesignViewConfigButtonsProvider } from "../widgets/designerView/IDesignViewConfigButtonsProvider.js";
+import { IDemoProviderService } from "./demoProviderService/IDemoProviderService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -39,6 +41,7 @@ interface ServiceNameMap {
     "dragDropService": IDragDropService;
     "copyPasteService": ICopyPasteService;
     "modelCommandService": IModelCommandService;
+    "demoProviderService": IDemoProviderService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -46,6 +49,7 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
         demoViewWidget: new (...args: any[]) => IDemoView & HTMLElement;
     };
     readonly designerExtensions: Map<(ExtensionType | string), IDesignerExtensionProvider[]>;
+    readonly designViewConfigButtons: IDesignViewConfigButtonsProvider[];
     readonly designerPointerExtensions: IDesignerPointerExtensionProvider[];
     designerContextMenuExtensions: IContextMenuExtension[];
     readonly globalContext: GlobalContext;
@@ -65,5 +69,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get dragDropService(): IDragDropService;
     get copyPasteService(): ICopyPasteService;
     get modelCommandService(): IModelCommandService;
+    get demoProviderService(): IDemoProviderService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -8,6 +8,7 @@ export class ServiceContainer extends BaseServiceContainer {
         demoViewWidget: DemoView
     };
     designerExtensions = new Map();
+    designViewConfigButtons = [];
     designerPointerExtensions = [];
     designerContextMenuExtensions;
     globalContext = new GlobalContext(this);
@@ -57,4 +58,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get modelCommandService() {
         return this.getLastService('modelCommandService');
     }
+    get demoProviderService() {
+        return this.getLastService('demoProviderService');
+    }
 }

package/dist/elements/services/demoProviderService/DemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class DemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -0,0 +1,28 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper';
+export class DemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            for (let i of instanceServiceContainer.designContext.imports) {
+                doc.write("import '" + i + "';");
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<body style="display:none">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.d.ts

@@ -0,0 +1,5 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): any;
+}

package/dist/elements/services/demoProviderService/IDemoProviderService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/placementService/DefaultPlacementService.d.ts

@@ -3,7 +3,7 @@ import type { IPlacementService } from './IPlacementService.js';
 import type { IDesignItem } from '../../item/IDesignItem.js';
 import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class DefaultPlacementService implements IPlacementService {
-    serviceForContainer(container: IDesignItem): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;

package/dist/elements/services/placementService/DefaultPlacementService.js

@@ -2,9 +2,9 @@ import { DomConverter } from '../../widgets/designerView/DomConverter.js';
 import { combineTransforms } from '../../helper/TransformHelper.js';
 import { filterChildPlaceItems, placeDesignItem } from '../../helper/LayoutHelper.js';
 export class DefaultPlacementService {
-    serviceForContainer(container) {
-        if (container.element.style.display === 'grid' || container.element.style.display === 'inline-grid' ||
-            container.element.style.display === 'flex' || container.element.style.display === 'inline-flex')
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
+            containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
             return false;
         return true;
     }

package/dist/elements/services/placementService/FlexBoxPlacementService.d.ts

@@ -5,7 +5,7 @@ import { IPlacementService } from './IPlacementService.js';
 export declare class FlexBoxPlacementService implements IPlacementService {
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;

package/dist/elements/services/placementService/FlexBoxPlacementService.js

@@ -10,8 +10,8 @@ export class FlexBoxPlacementService {
     }
     leaveContainer(container, items) {
     }
-    serviceForContainer(container) {
-        if (container.element.style.display == 'flex' || container.element.style.display == 'inline-flex')
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display == 'flex' || containerStyle.display == 'inline-flex')
             return true;
         return false;
     }

package/dist/elements/services/placementService/GridPlacementService.d.ts

@@ -5,7 +5,7 @@ import { IPlacementView } from '../../widgets/designerView/IPlacementView.js';
 export declare class GridPlacementService implements IPlacementService {
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    serviceForContainer(container: IDesignItem): boolean;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
     getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;

package/dist/elements/services/placementService/GridPlacementService.js

@@ -1,5 +1,6 @@
 import { CalculateGridInformation } from '../../helper/GridHelper.js';
 import { pointInRect } from '../../helper/Helper.js';
+import { DefaultPlacementService } from './DefaultPlacementService';
 export class GridPlacementService {
     enterContainer(container, items) {
         for (let i of items) {
@@ -20,8 +21,8 @@ export class GridPlacementService {
             }
         }
     }
-    serviceForContainer(container) {
-        if (container.element.style.display == 'grid' || container.element.style.display == 'inline-grid')
+    serviceForContainer(container, containerStyle) {
+        if (containerStyle.display == 'grid' || containerStyle.display == 'inline-grid')
             return true;
         return false;
     }
@@ -35,7 +36,8 @@ export class GridPlacementService {
         return container.element.getBoundingClientRect();
     }
     placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
-        return null;
+        const defaultPlacementService = container.serviceContainer.getLastServiceWhere('containerService', x => x instanceof DefaultPlacementService);
+        return defaultPlacementService.placePoint(event, placementView, container, startPoint, offsetInControl, newPoint, items);
     }
     place(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = CalculateGridInformation(container);
@@ -49,14 +51,23 @@ export class GridPlacementService {
                 column = 0;
                 for (let cell of cellRow) {
                     if (pointInRect(pos, cell)) {
-                        items[0].element.style.gridColumn = column + 1;
-                        items[0].element.style.gridRow = row + 1;
+                        if (cell.name) {
+                            items[0].element.style.gridColumn = '';
+                            items[0].element.style.gridRow = '';
+                            items[0].element.style.gridArea = cell.name;
+                        }
+                        else {
+                            items[0].element.style.gridArea = '';
+                            items[0].element.style.gridColumn = column + 1;
+                            items[0].element.style.gridRow = row + 1;
+                        }
                     }
                     column++;
                 }
                 row++;
             }
         }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
     finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
         const gridInformation = CalculateGridInformation(container);
@@ -68,12 +79,21 @@ export class GridPlacementService {
             column = 0;
             for (let cell of cellRow) {
                 if (pointInRect(pos, cell)) {
-                    items[0].setStyle('grid-column', column + 1);
-                    items[0].setStyle('grid-row', row + 1);
+                    if (cell.name) {
+                        items[0].removeStyle('grid-column');
+                        items[0].removeStyle('grid-row');
+                        items[0].setStyle('grid-area', cell.name);
+                    }
+                    else {
+                        items[0].removeStyle('grid-area');
+                        items[0].setStyle('grid-column', column + 1);
+                        items[0].setStyle('grid-row', row + 1);
+                    }
                 }
                 column++;
             }
             row++;
         }
+        placementView.extensionManager.refreshAllExtensions([container]);
     }
 }

package/dist/elements/services/placementService/IPlacementService.d.ts

@@ -3,7 +3,7 @@ import { IDesignItem } from "../../item/IDesignItem";
 import { IPlacementView } from "../../widgets/designerView/IPlacementView";
 import { IPoint } from "../../../interfaces/IPoint";
 export interface IPlacementService extends IService {
-    serviceForContainer(container: IDesignItem): any;
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration): any;
     canEnter(container: IDesignItem, items: IDesignItem[]): any;
     canLeave(container: IDesignItem, items: IDesignItem[]): any;
     enterContainer(container: IDesignItem, items: IDesignItem[]): any;

package/dist/elements/widgets/demoView/demoView.d.ts

@@ -7,5 +7,5 @@ export declare class DemoView extends BaseCustomWebComponentLazyAppend implement
     private _loading;
     static readonly style: CSSStyleSheet;
     constructor();
-    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): void;
+    display(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
 }

package/dist/elements/widgets/demoView/demoView.js

@@ -18,11 +18,6 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     position: absolute;
     top: 60px;
     left: 20px;
-  }
-  iframe {
-    width: 100%;
-    height: 100%;
-    border: none;
   }`;
     constructor() {
         super();
@@ -34,24 +29,10 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
     }
-    display(serviceContainer, instanceServiceContainer, code) {
-        let iframe = document.createElement('iframe');
-        this._placeholder.innerHTML = '';
-        this._placeholder.appendChild(iframe);
+    async display(serviceContainer, instanceServiceContainer, code) {
         this._loading.hidden = false;
-        iframe.onload = () => {
-            this._loading.hidden = true;
-        };
-        let doc = iframe.contentWindow.document;
-        doc.open();
-        doc.write('<script type="module">');
-        for (let i of instanceServiceContainer.designContext.imports) {
-            doc.write("import '" + i + "';");
-        }
-        doc.write("document.body.style.display='';");
-        doc.write('</script>');
-        doc.write('<body style="display:none">' + code + '</body>');
-        doc.close();
+        await serviceContainer.demoProviderService.provideDemo(this._placeholder, serviceContainer, instanceServiceContainer, code);
+        this._loading.hidden = true;
     }
 }
 customElements.define('node-projects-demo-view', DemoView);

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider copy.js

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.d.ts

@@ -0,0 +1,8 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+export declare class ButtonSeperatorProvider implements IDesignViewConfigButtonsProvider {
+    _space: number;
+    constructor(space: number);
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/ButtonSeperatorProvider.js

@@ -0,0 +1,11 @@
+export class ButtonSeperatorProvider {
+    _space;
+    constructor(space) {
+        this._space = space;
+    }
+    provideButtons(designerView, designerCanvas) {
+        const div = document.createElement('div');
+        div.style.marginLeft = this._space + 'px';
+        return [div];
+    }
+}

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,4 +1,7 @@
 import { IDesignContext } from "./IDesignContext";
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

package/dist/elements/widgets/designerView/DesignContext.js

@@ -1,3 +1,4 @@
 export class DesignContext {
     imports = [];
+    extensionOptions = {};
 }

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.d.ts

@@ -0,0 +1,7 @@
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+import { IDesignViewConfigButtonsProvider } from "./IDesignViewConfigButtonsProvider.js";
+import { DesignerView } from './designerView';
+export declare class DesignerViewUseOverlayScollbars implements IDesignViewConfigButtonsProvider {
+    constructor();
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/DesignerViewUseOverlayScollbars.js

@@ -0,0 +1,13 @@
+//todo, element moving does not work atm, needs to be fixed
+export class DesignerViewUseOverlayScollbars {
+    constructor() {
+    }
+    provideButtons(designerView, designerCanvas) {
+        let externalCss = document.createElement('style');
+        externalCss.innerHTML = '@import url("./node_modules/overlayscrollbars/css/OverlayScrollbars.min.css");';
+        designerCanvas.shadowRoot.appendChild(externalCss);
+        //@ts-ignore
+        setTimeout(() => OverlayScrollbars([designerCanvas._outercanvas2], {}), 5000);
+        return [];
+    }
+}

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,3 +1,6 @@
 export interface IDesignContext {
     imports: string[];
+    extensionOptions: {
+        [key: string]: any;
+    };
 }

package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.d.ts

@@ -0,0 +1,5 @@
+import { DesignerView } from "./designerView.js";
+import { IDesignerCanvas } from "./IDesignerCanvas.js";
+export interface IDesignViewConfigButtonsProvider {
+    provideButtons(designerView: DesignerView, designerCanvas: IDesignerCanvas): HTMLElement[];
+}

package/dist/elements/widgets/designerView/IDesignViewConfigButtonsProvider.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/designerView/designerCanvas.d.ts

@@ -72,7 +72,6 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;
     getNormalizedElementCoordinates(element: Element): IRect;
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
-    static getHost(node: Node): Element;
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     _rect: SVGRectElement;
     private _pointerEventHandler;