@node-projects/web-component-designer 0.0.117 → 0.0.118

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

@@ -11,6 +11,9 @@ export class AltToEnterContainerExtension extends AbstractExtension {
     refresh() {
         let itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         this._text = this._drawText("Press ALT to enter container", itemRect.x + 5, itemRect.y + 12, 'svg-text-enter-container', this._text, OverlayLayer.Foregorund);
+        this._text.style.fontSize = (14 / this.designerCanvas.scaleFactor) + 'px';
+        this._text.setAttribute('x', '' + (itemRect.x + 5 / this.designerCanvas.scaleFactor));
+        this._text.setAttribute('y', '' + (itemRect.y + 12 / this.designerCanvas.scaleFactor));
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -8,6 +8,6 @@ export class AltToEnterContainerExtensionProvider {
         return new AltToEnterContainerExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-size: 14px; font-weight:800; font-family: monospace; }
+    .svg-text-enter-container { stroke: none; fill: black; stroke-width: 1; font-weight:800; font-family: monospace; }
   `;
 }

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

@@ -16,19 +16,26 @@ export class ElementDragTitleExtension extends AbstractExtension {
         this._rect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointermove', (e) => this._pointerEvent(e));
         this._rect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+        this.refresh();
     }
     _drawMoveOverlay(itemRect) {
     }
     refresh() {
         const boundRect = this.extendedItem.element.getBoundingClientRect();
         const xr = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 16;
+        const h = (15 / this.designerCanvas.scaleFactor);
+        const w = (60 / this.designerCanvas.scaleFactor);
+        const yr = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - h;
         this._rect.setAttribute('x', xr);
         this._rect.setAttribute('y', yr);
+        this._rect.setAttribute('height', '' + h);
+        this._rect.setAttribute('width', '' + w);
+        this._rect.style.strokeWidth = (1 / this.designerCanvas.scaleFactor).toString();
         const x = (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor;
-        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5;
+        const y = (boundRect.y - this.designerCanvas.containerBoundingRect.y) / this.designerCanvas.scaleFactor - 5 / this.designerCanvas.scaleFactor;
         this._text.setAttribute('x', x);
         this._text.setAttribute('y', y);
+        this._text.style.fontSize = (10 / this.designerCanvas.scaleFactor) + 'px';
     }
     _pointerEvent(event) {
         event.preventDefault();

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

@@ -8,6 +8,6 @@ export class ElementDragTitleExtensionProvider {
         return new ElementDragTitleExtension(extensionManager, designerView, designItem);
     }
     style = css `
-    .svg-text-primary { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
+    .svg-text-primary { stroke: none; fill: white; font-family: monospace; }
   `;
 }

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

@@ -26,6 +26,10 @@ export class PathExtension extends AbstractExtension {
                     this._drawPathCircle(p.values[0], p.values[1], p, 0);
                     this._lastPos = { x: p.values[0], y: p.values[1] };
                     break;
+                case 'l':
+                    this._drawPathCircle(p.values[0] + this._lastPos.x, p.values[1] + this._lastPos.y, p, 0);
+                    this._lastPos = { x: p.values[0] + this._lastPos.x, y: p.values[1] + this._lastPos.y };
+                    break;
                 case 'H':
                     break;
                 case 'V':

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.117",
+  "version": "0.0.118",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -19,20 +19,20 @@
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.37",
+    "@papyrs/stylo": "^0.0.39",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.9.6",
+    "ace-builds": "^1.11.2",
     "codemirror": "^6.0.1",
-    "esprima-next": "^5.8.3",
+    "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^28.0.8",
+    "jest": "^29.1.1",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
     "monaco-editor": "^0.34.0",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.8.2",
+    "ts-jest": "^29.0.2",
+    "typescript": "^4.8.4",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {