@node-projects/web-component-designer 0.1.138 → 0.1.139

package/dist/elements/services/propertiesService/services/CssProperties.json

@@ -526,7 +526,7 @@
             "visible",
             "hidden",
             "clip",
-            "scoll",
+            "scroll",
             "auto"
         ]
     },
@@ -539,7 +539,7 @@
             "visible",
             "hidden",
             "clip",
-            "scoll",
+            "scroll",
             "auto"
         ]
     },
@@ -549,7 +549,7 @@
             "visible",
             "hidden",
             "clip",
-            "scoll",
+            "scroll",
             "auto"
         ]
     },

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

@@ -127,6 +127,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
     showHoverExtension(element: Element, event: Event): void;
+    private _onWheel;
     private _pointerEventHandler;
     captureActiveTool(tool: ITool): void;
     releaseActiveTool(): void;

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

@@ -287,6 +287,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this.onKeyUp = this.onKeyUp.bind(this);
         this._onDblClick = this._onDblClick.bind(this);
         this._pointerEventHandler = this._pointerEventHandler.bind(this);
+        this._onWheel = this._onWheel.bind(this);
         this._getDomElement('node-projects-designer-search-close').onclick = () => this._searchHideOverlay();
         this._getDomElement('node-projects-designer-search-start').onclick = () => this._searchRun();
         this._getDomElement('node-projects-designer-search-container').onkeydown = (event) => {
@@ -649,6 +650,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this.clickOverlay.addEventListener(EventNames.KeyDown, this.onKeyDown);
             this.clickOverlay.addEventListener(EventNames.KeyUp, this.onKeyUp);
             this.clickOverlay.addEventListener(EventNames.DblClick, this._onDblClick, true);
+            this.clickOverlay.addEventListener(EventNames.Wheel, this._onWheel);
             this.clickOverlay.addEventListener('zoom', (e) => {
                 this.zoomFactor = this.zoomFactor + (e.detail.diff / 10);
             });
@@ -1044,6 +1046,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             this._lastHoverDesignItem = currentDesignItem;
         }
     }
+    _onWheel(event) {
+        let el = this.getElementAtPoint({ x: event.clientX, y: event.clientY });
+        while (el) {
+            const cs = getComputedStyle(el);
+            if (cs.overflowY === 'scroll' || cs.overflowY === 'auto') {
+                const target = el;
+                if (target.scrollBy)
+                    target.scrollBy(event.deltaX, event.deltaY);
+                else {
+                    target.scrollLeft += event.deltaX;
+                    target.scrollTop += event.deltaY;
+                }
+                event.stopPropagation();
+                break;
+            }
+            el = el.parentElement;
+        }
+    }
     _pointerEventHandler(event, forceElement = null) {
         if (this._ignoreEvent === event)
             return;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.138",
+  "version": "0.1.139",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",