@node-projects/web-component-designer 0.0.81 → 0.0.82

package/dist/elements/widgets/codeView/code-view-code-mirror.js

@@ -20,7 +20,7 @@ export class CodeViewCodeMirror extends BaseCustomWebComponentLazyAppend {
     constructor() {
         super();
         //@ts-ignore
-        import("./codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
+        import("/codemirror/lib/codemirror.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
         this.style.display = 'block';
         this._editor = this._getDomElement('textarea');
     }

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

@@ -53,6 +53,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     set designerWidth(value: string);
     get designerHeight(): string;
     set designerHeight(value: string);
+    get designerOffsetWidth(): number;
+    get designerOffsetHeight(): number;
     set additionalStyle(value: CSSStyleSheet);
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;

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

@@ -163,6 +163,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         this._canvasContainer.style.height = value;
         this.zoomFactorChanged();
     }
+    get designerOffsetWidth() {
+        return this._canvasContainer.offsetWidth;
+    }
+    get designerOffsetHeight() {
+        return this._canvasContainer.offsetHeight;
+    }
     set additionalStyle(value) {
         if (value) {
             for (let r of value.rules) {

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

@@ -201,17 +201,27 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
         this._lowertoolbar = this._getDomElement('lowertoolbar');
         this._sVert = this._getDomElement('s-vert');
         this._sHor = this._getDomElement('s-hor');
-        this._sVert.addEventListener('scrollbar-input', () => this._onScrollbar());
-        this._sHor.addEventListener('scrollbar-input', () => this._onScrollbar());
+        this._sVert.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
+        this._sHor.addEventListener('scrollbar-input', (e) => this._onScrollbar(e));
     }
-    _onScrollbar() {
-        const x = this.designerCanvas.offsetWidth * (this._sHor.value - 0.5) * -1;
-        const y = this.designerCanvas.offsetHeight * (this._sVert.value - 0.5) * -1;
+    _onScrollbar(e) {
+        if (e?.detail == 'incrementLarge')
+            e.target.value += 0.25;
+        else if (e?.detail == 'decrementLarge')
+            e.target.value -= 0.25;
+        else if (e?.detail == 'incrementSmall')
+            e.target.value += 0.05;
+        else if (e?.detail == 'decrementSmall')
+            e.target.value -= 0.05;
+        const w = this.designerCanvas.designerOffsetWidth > this.designerCanvas.offsetWidth ? this.designerCanvas.designerOffsetWidth : this.designerCanvas.offsetWidth;
+        const h = this.designerCanvas.designerOffsetHeight > this.designerCanvas.offsetHeight ? this.designerCanvas.designerOffsetHeight : this.designerCanvas.offsetHeight;
+        const x = w * (this._sHor.value - 0.5) * -2;
+        const y = h * (this._sVert.value - 0.5) * -2;
         this.designerCanvas.canvasOffset = { x, y };
     }
     _onWheel(event) {
+        event.preventDefault();
         if (event.ctrlKey) {
-            event.preventDefault();
             let zf = this._designerCanvas.zoomFactor;
             zf += event.deltaY * -0.001; //deltamode = 0
             if (zf < 0.02)
@@ -220,6 +230,11 @@ export class DesignerView extends BaseCustomWebComponentConstructorAppend {
             this._zoomInput.value = Math.round(zf * 100) + '%';
             //TODO: we should zoom on the current cursor position, so it stays the center
         }
+        else {
+            this._sHor.value += event.deltaX / 1000;
+            this._sVert.value += event.deltaY / 1000;
+            this._onScrollbar(null);
+        }
     }
     get designerWidth() {
         return this._designerCanvas.designerWidth;

package/dist/elements/widgets/designerView/extensions/PathExtension.js

@@ -55,19 +55,23 @@ export class PathExtension extends AbstractExtension {
                 case 'S':
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._lastPos = { x: p.values[2], y: p.values[3] };
                     break;
                 case 'Q':
-                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
-                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
                     this._drawPathLine(this._lastPos.x, this._lastPos.y, p.values[0], p.values[1]);
                     this._drawPathLine(p.values[0], p.values[1], p.values[2], p.values[3]);
+                    this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._drawPathCircle(p.values[2], p.values[3], p, 2);
+                    this._lastPos = { x: p.values[2], y: p.values[3] };
                     break;
                 case 'T':
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
                     break;
                 case 'A':
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._drawPathCircle(p.values[5], p.values[6], p, 5);
+                    this._lastPos = { x: p.values[0], y: p.values[1] };
                     break;
             }
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -13,7 +13,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": "^0.4.1",
+    "@node-projects/base-custom-webcomponent": "^0.5.0",
     "construct-style-sheets-polyfill": "^3.0.5"
   },
   "devDependencies": {
@@ -23,7 +23,7 @@
     "@types/jquery": "^3.5.13",
     "@types/jquery.fancytree": "0.0.7",
     "ace-builds": "^1.4.13",
-    "codemirror": "^5.65.0",
+    "codemirror": "^5.65.1",
     "custom-elements-manifest": "^1.0.0",
     "esprima-next": "^5.8.1",
     "html2canvas": "*",
@@ -32,7 +32,7 @@
     "jquery.fancytree": "^2.38.1",
     "monaco-editor": "^0.31.1",
     "ts-jest": "^27.1.3",
-    "typescript": "^4.5.4",
+    "typescript": "^4.5.5",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {