@node-projects/web-component-designer 0.0.146 → 0.0.147

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type DesignerTabControlIndexChangedEventArgs = {
+export type DesignerTabControlIndexChangedEventArgs = {
     newIndex: number;
     oldIndex?: number;
     changedViaClick?: boolean;

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ImageButtonListSelectorValueChangedEventArgs = {
+export type ImageButtonListSelectorValueChangedEventArgs = {
     newValue?: string;
     oldValue?: string;
 };

package/dist/elements/controls/MetricsEditor.d.ts

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export declare type ThicknessEditorValueChangedEventArgs = {
+export type ThicknessEditorValueChangedEventArgs = {
     newValue?: string;
     oldValue?: string;
 };

package/dist/elements/controls/MetricsEditor.js

@@ -74,12 +74,18 @@ div.ct > div.ct > div.ct > div.ct > div.ct {
   display: inline-flex;
   justify-content: center;
   align-items: center;
+}
+
+span {
+  width: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }`;
     static template = html `
-  <div class="ct"><span>position</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span>margin</span>
-  <div id="testdiv" [contentEditable]="contentEditable"  @dblclick="onDoubleClick" class="top">-</div><br><div class="left">-</div><div class="ct"><span>border</span>
-  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span>padding</span>
+  <div class="ct"><span title="position">position</span>
+  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="margin">margin</span>
+  <div id="testdiv" [contentEditable]="contentEditable"  @dblclick="onDoubleClick" class="top">-</div><br><div class="left">-</div><div class="ct"><span title="border">border</span>
+  <div class="top">-</div><br><div class="left">-</div><div class="ct"><span title="padding">padding</span>
   <div class="top">-</div><br><div class="left">-</div><div class="ct" style="font-size:6px"><div class="left">-</div>
   x
   <div class="right">-</div>

package/dist/elements/controls/NumericStyleInput.d.ts

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ImageButtonListSelectorValueChangedEventArgs = {
+export type ImageButtonListSelectorValueChangedEventArgs = {
     newValue?: string;
     oldValue?: string;
 };

package/dist/elements/controls/ThicknessEditor.d.ts

@@ -1,5 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ThicknessEditorValueChangedEventArgs = {
+export type ThicknessEditorValueChangedEventArgs = {
     newValue?: string;
     oldValue?: string;
 };

package/dist/elements/services/bindableObjectsService/IBindableObjectDragDropService.d.ts

@@ -1,8 +1,8 @@
 import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
 import { IBindableObject } from "./IBindableObject.js";
 export interface IBindableObjectDragDropService {
-    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent): any;
-    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent): any;
-    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'none' | 'copy' | 'link' | 'move';
-    drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>): any;
+    dragEnter(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): any;
+    dragLeave(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): any;
+    dragOver(designerCanvas: IDesignerCanvas, event: DragEvent, element: Element): 'none' | 'copy' | 'link' | 'move';
+    drop(designerCanvas: IDesignerCanvas, event: DragEvent, bindableObject: IBindableObject<any>, element: Element): any;
 }

package/dist/elements/services/dragDropService/DragDropService.js

@@ -13,7 +13,7 @@ export class DragDropService {
                 const img = document.createElement('img');
                 img.src = reader.result;
                 const di = DesignItem.createDesignItemFromInstance(img, designerView.serviceContainer, designerView.instanceServiceContainer);
-                let grp = di.openGroup("Insert");
+                let grp = di.openGroup("Insert of <img>");
                 di.setStyle('position', 'absolute');
                 const targetRect = event.target.getBoundingClientRect();
                 di.setStyle('top', event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px');

package/dist/elements/services/popupService/IPopupService.d.ts

@@ -1,5 +1,5 @@
-export declare type PlacementType = 'automatic' | 'relativeTo';
-export declare type PopupPlacement = {
+export type PlacementType = 'automatic' | 'relativeTo';
+export type PopupPlacement = {
     placementType: PlacementType;
     top?: number;
     left?: number;
@@ -8,7 +8,7 @@ export declare type PopupPlacement = {
     width?: number;
     height?: number;
 };
-export declare type Popup = {
+export type Popup = {
     close: () => void;
 };
 export interface IPopupService {

package/dist/elements/services/undoService/IUndoService.d.ts

@@ -9,4 +9,6 @@ export interface IUndoService extends IService {
     clear(): any;
     undo(): any;
     redo(): any;
+    getUndoEntries(): Generator<string, void, unknown>;
+    getRedoEntries(): Generator<string, void, unknown>;
 }

package/dist/elements/services/undoService/UndoService.d.ts

@@ -17,4 +17,6 @@ export declare class UndoService implements IUndoService {
     redo(): void;
     canUndo(): boolean;
     canRedo(): boolean;
+    getUndoEntries(): Generator<string, void, unknown>;
+    getRedoEntries(): Generator<string, void, unknown>;
 }

package/dist/elements/services/undoService/UndoService.js

@@ -96,4 +96,12 @@ export class UndoService {
     canRedo() {
         return this._redoStack.length > 0;
     }
+    *getUndoEntries() {
+        for (let i = this._undoStack.length - 1; i >= 0; i--)
+            yield this._undoStack[i].title;
+    }
+    *getRedoEntries() {
+        for (let i = this._redoStack.length - 1; i >= 0; i--)
+            yield this._redoStack[i].title;
+    }
 }

package/dist/elements/services/undoService/transactionItems/AttributeChangeAction.js

@@ -1,6 +1,6 @@
 export class AttributeChangeAction {
     constructor(designItem, name, newValue, oldValue) {
-        this.title = "Change Attribute";
+        this.title = "Change Attribute " + name + " of <" + designItem.name + ">";
         this.designItem = designItem;
         this.name = name;
         this.newValue = newValue;

package/dist/elements/services/undoService/transactionItems/CssStyleChangeAction.js

@@ -1,6 +1,6 @@
 export class CssStyleChangeAction {
     constructor(designItem, name, newValue, oldValue) {
-        this.title = "Change CSS Style";
+        this.title = "Change Css Style " + name + " of <" + designItem.name + ">";
         this.designItem = designItem;
         this.name = name;
         this.newValue = newValue;

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

@@ -84,6 +84,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     _dragOverExtensionItem: IDesignItem;
     private _onDragEnter;
     private _onDragLeave;
+    private _lastDdElement;
     private _onDragOver;
     private _getPossibleContainerForDrop;
     private _onDrop;

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

@@ -510,28 +510,31 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (hasTransferDataBindingObject) {
             const ddService = this.serviceContainer.bindableObjectDragDropService;
             if (ddService) {
-                const effect = ddService.dragEnter(this, event);
-                event.dataTransfer.dropEffect = effect;
+                const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                if (this._lastDdElement != el) {
+                    ddService.dragLeave(this, event, this._lastDdElement);
+                    ddService.dragEnter(this, event, el);
+                    this._lastDdElement = el;
+                }
+            }
+            else {
+                this._lastDdElement = null;
             }
         }
+        else {
+            this._lastDdElement = null;
+        }
     }
     _onDragLeave(event) {
         this._fillCalculationrects();
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
-        const hasTransferDataBindingObject = event.dataTransfer.types.indexOf(dragDropFormatNameBindingObject) >= 0;
-        if (hasTransferDataBindingObject) {
-            const ddService = this.serviceContainer.bindableObjectDragDropService;
-            if (ddService) {
-                const effect = ddService.dragLeave(this, event);
-                event.dataTransfer.dropEffect = effect;
-            }
-        }
         if (this._dragOverExtensionItem) {
             this.extensionManager.removeExtension(this._dragOverExtensionItem, ExtensionType.ContainerExternalDragOver);
             this._dragOverExtensionItem = null;
         }
     }
+    _lastDdElement = null;
     _onDragOver(event) {
         event.preventDefault();
         /*if (this.alignOnSnap) {
@@ -556,7 +559,13 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             if (hasTransferDataBindingObject) {
                 const ddService = this.serviceContainer.bindableObjectDragDropService;
                 if (ddService) {
-                    const effect = ddService.dragOver(this, event);
+                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                    if (this._lastDdElement != el) {
+                        ddService.dragLeave(this, event, this._lastDdElement);
+                        ddService.dragEnter(this, event, el);
+                        this._lastDdElement = el;
+                    }
+                    const effect = ddService.dragOver(this, event, el);
                     event.dataTransfer.dropEffect = effect;
                 }
             }
@@ -603,6 +612,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         return [newContainerElementDesignItem, newContainerService];
     }
     async _onDrop(event) {
+        this._lastDdElement = null;
         event.preventDefault();
         this._canvas.classList.remove('dragFileActive');
         this._fillCalculationrects();
@@ -618,7 +628,8 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 const bo = JSON.parse(transferDataBindingObject);
                 const ddService = this.serviceContainer.bindableObjectDragDropService;
                 if (ddService) {
-                    const effect = ddService.drop(this, event, bo);
+                    const el = this.getElementAtPoint({ x: event.x, y: event.y });
+                    const effect = ddService.drop(this, event, bo, el);
                     event.dataTransfer.dropEffect = effect;
                 }
             }
@@ -637,7 +648,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 const transferData = event.dataTransfer.getData(dragDropFormatNameElementDefinition);
                 const elementDefinition = JSON.parse(transferData);
                 const di = await this.serviceContainer.forSomeServicesTillResult("instanceService", (service) => service.getElement(elementDefinition, this.serviceContainer, this.instanceServiceContainer));
-                const grp = di.openGroup("Insert");
+                const grp = di.openGroup("Insert of <" + di.name + ">");
                 di.setStyle('position', 'absolute');
                 di.setStyle('left', (position.x - pos.x) + 'px');
                 di.setStyle('top', (position.y - pos.y) + 'px');

package/dist/elements/widgets/designerView/extensions/EditText/EditTextExtension.d.ts

@@ -2,7 +2,7 @@ import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
 import { AbstractExtension } from "../AbstractExtension.js";
 import { IExtensionManager } from "../IExtensionManger";
-export declare type handlesPointerEvent = {
+export type handlesPointerEvent = {
     handlesPointerEvent(designerCanvas: IDesignerCanvas, event: PointerEvent, currentElement: Element): boolean;
 };
 export declare class EditTextExtension extends AbstractExtension implements handlesPointerEvent {

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

@@ -139,7 +139,7 @@ export class ResizeExtension extends AbstractExtension {
                 break;
             case EventNames.PointerUp:
                 event.target.releasePointerCapture(event.pointerId);
-                let cg = this.extendedItem.openGroup("Resize Elements");
+                let cg = this.extendedItem.openGroup((this.resizeAllSelected && this.designerCanvas.instanceServiceContainer.selectionService.selectedElements.length > 1) ? "Resize Elements" : "Resize <" + this.extendedItem.name + ">");
                 this.extendedItem.setStyle('width', this.extendedItem.element.style.width);
                 this.extendedItem.setStyle('height', this.extendedItem.element.style.height);
                 if (this.resizeAllSelected) {

package/dist/elements/widgets/designerView/extensions/contextMenu/IContextMenuExtension.d.ts

@@ -1,7 +1,7 @@
 import { IContextMenuItem } from "../../../../helper/contextMenu/IContextMenuItem";
 import { IDesignItem } from "../../../../item/IDesignItem";
 import { IDesignerCanvas } from "../../IDesignerCanvas";
-export declare type ContextmenuInitiator = 'designer' | 'treeView' | 'other';
+export type ContextmenuInitiator = 'designer' | 'treeView' | 'other';
 export interface IContextMenuExtension {
     shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): any;
     provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];

package/dist/enums/EventNames.d.ts

@@ -3,6 +3,7 @@ export declare enum EventNames {
     PointerMove = "pointermove",
     PointerUp = "pointerup",
     DragEnter = "dragenter",
+    DragEnd = "dragend",
     DragLeave = "dragleave",
     DragOver = "dragover",
     Drop = "drop",

package/dist/enums/EventNames.js

@@ -4,6 +4,7 @@ export var EventNames;
     EventNames["PointerMove"] = "pointermove";
     EventNames["PointerUp"] = "pointerup";
     EventNames["DragEnter"] = "dragenter";
+    EventNames["DragEnd"] = "dragend";
     EventNames["DragLeave"] = "dragleave";
     EventNames["DragOver"] = "dragover";
     EventNames["Drop"] = "drop";

package/dist/index.d.ts

@@ -124,6 +124,7 @@ export type { IPlacementView } from "./elements/widgets/designerView/IPlacementV
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
+export * from "./elements/widgets/designerView/DomConverter.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";

package/dist/index.js

@@ -86,6 +86,7 @@ export * from "./elements/widgets/propertyGrid/PropertyGridWithHeader.js";
 export * from "./elements/widgets/designerView/designerView.js";
 export * from "./elements/widgets/designerView/overlayLayerView.js";
 export * from "./elements/widgets/designerView/defaultConfiguredDesignerView.js";
+export * from "./elements/widgets/designerView/DomConverter.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js";
 export * from "./elements/widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.146",
+  "version": "0.0.147",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",
@@ -14,25 +14,26 @@
   },
   "dependencies": {
     "@node-projects/base-custom-webcomponent": "^0.10.3",
+    "@types/node": "^18.11.9",
     "construct-style-sheets-polyfill": "^3.1.0"
   },
   "devDependencies": {
     "@node-projects/lean-he-esm": "^3.3.0",
     "@node-projects/node-html-parser-esm": "^2.4.1",
-    "@papyrs/stylo": "^0.0.39",
+    "@papyrs/stylo": "^0.0.41",
     "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "@types/jquery.fancytree": "0.0.7",
-    "ace-builds": "^1.11.2",
+    "ace-builds": "^1.13.1",
     "codemirror": "^6.0.1",
     "esprima-next": "^5.8.4",
     "html2canvas": "*",
-    "jest": "^29.1.2",
+    "jest": "^29.3.1",
     "jquery": "^3.6.1",
     "jquery.fancytree": "^2.38.2",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.34.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.3",
     "typescript-lit-html-plugin": "^0.9.0"
   },
   "repository": {