@node-projects/web-component-designer 0.1.158 → 0.1.160

package/README.md

@@ -56,15 +56,6 @@ Your index.html should be extended as follows:
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
 
-## Similar Frameworks
-
-| Name                    | Licence  | Edit Source |   |   |
-|-------------------------|----------|-------------|---|---|
-| web-component-designer  | MIT      | yes         |   |   |
-| GrapeJS                 | BSD-3    | yes         |   |   |
-| CraftJS                 | MIT      | no          |   |   |
-
-
 ## Copyright notice
 
 The Library uses Images from the Chrome Dev Tools, see

package/dist/elements/controls/ImageButtonListSelector.js

@@ -16,7 +16,6 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
     }
     .container {
       display: flex;
-      flex-wrap: wrap;
       flex-direction: row;
     }
     ::slotted(button) {

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

@@ -0,0 +1 @@
+export declare function stylesheetFromString(window: Window, text: string): any;

package/dist/elements/helper/StylesheetHelper.js

@@ -0,0 +1,6 @@
+export function stylesheetFromString(window, text) {
+    //@ts-ignore
+    const newStylesheet = new window.CSSStyleSheet();
+    newStylesheet.replaceSync(text);
+    return newStylesheet;
+}

package/dist/elements/helper/contextMenu/ContextMenu.js

@@ -52,7 +52,6 @@ export class ContextMenu {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		border-right: 1px solid #aaa;
 	  }
 
 	  .context_menu li .context_menu_icon_span img {	
@@ -168,7 +167,10 @@ export class ContextMenu {
                 let li = document.createElement("li");
                 let icon_span = document.createElement("span");
                 icon_span.className = 'context_menu_icon_span';
-                if ((item.icon ?? '') != '') {
+                if (item.checked === true) {
+                    icon_span.innerHTML = '✔';
+                }
+                else if ((item.icon ?? '') != '') {
                     icon_span.innerHTML = item.icon;
                 }
                 else {

package/dist/elements/helper/contextMenu/IContextMenuItem.d.ts

@@ -8,5 +8,6 @@ export interface IContextMenuItem {
     readonly children?: IContextMenuItem[];
     readonly disabled?: boolean;
     readonly shortCut?: string;
+    readonly checked?: boolean;
     action?: (event: MouseEvent, item: IContextMenuItem, context?: any, menu?: IContextMenu) => void;
 }

package/dist/elements/item/DesignItem.d.ts

@@ -8,6 +8,12 @@ import { ISize } from '../../interfaces/ISize.js';
 import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
 import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 import { IPlacementService } from '../services/placementService/IPlacementService.js';
+export declare const forceHoverAttributeName = "node-projects-force-hover";
+export declare const forceActiveAttributeName = "node-projects-force-active";
+export declare const forceVisitedAttributeName = "node-projects-force-visited";
+export declare const forceFocusAttributeName = "node-projects-force-focus";
+export declare const forceFocusWithinAttributeName = "node-projects-force-focus-within";
+export declare const forceFocusVisibleAttributeName = "node-projects-force-focus-visible";
 export declare class DesignItem implements IDesignItem {
     lastContainerSize: ISize;
     parsedNode: any;
@@ -100,4 +106,17 @@ export declare class DesignItem implements IDesignItem {
     _refreshIfStyleSheet(): void;
     getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
     static createDesignItemFromImageBlob(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, data: Blob): Promise<IDesignItem>;
+    get hasForcedCss(): boolean;
+    get cssForceHover(): boolean;
+    set cssForceHover(value: boolean);
+    get cssForceActive(): boolean;
+    set cssForceActive(value: boolean);
+    get cssForceVisited(): boolean;
+    set cssForceVisited(value: boolean);
+    get cssForceFocus(): boolean;
+    set cssForceFocus(value: boolean);
+    get cssForceFocusWithin(): boolean;
+    set cssForceFocusWithin(value: boolean);
+    get cssForceFocusVisible(): boolean;
+    set cssForceFocusVisible(value: boolean);
 }

package/dist/elements/item/DesignItem.js

@@ -13,6 +13,12 @@ import { TextContentChangeAction } from '../services/undoService/transactionItem
 const hideAtDesignTimeAttributeName = 'node-projects-hide-at-design-time';
 const hideAtRunTimeAttributeName = 'node-projects-hide-at-run-time';
 const lockAtDesignTimeAttributeName = 'node-projects-lock-at-design-time';
+export const forceHoverAttributeName = 'node-projects-force-hover';
+export const forceActiveAttributeName = 'node-projects-force-active';
+export const forceVisitedAttributeName = 'node-projects-force-visited';
+export const forceFocusAttributeName = 'node-projects-force-focus';
+export const forceFocusWithinAttributeName = 'node-projects-force-focus-within';
+export const forceFocusVisibleAttributeName = 'node-projects-force-focus-visible';
 export class DesignItem {
     lastContainerSize;
     parsedNode;
@@ -681,4 +687,67 @@ export class DesignItem {
             reader.readAsDataURL(data);
         });
     }
+    get hasForcedCss() {
+        return this.cssForceHover || this.cssForceActive || this.cssForceVisited || this.cssForceFocus || this.cssForceFocusWithin || this.cssForceFocusVisible;
+    }
+    get cssForceHover() {
+        return this.element.hasAttribute(forceHoverAttributeName);
+    }
+    set cssForceHover(value) {
+        if (value)
+            this.element.setAttribute(forceHoverAttributeName, '');
+        else
+            this.element.removeAttribute(forceHoverAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
+    get cssForceActive() {
+        return this.element.hasAttribute(forceActiveAttributeName);
+    }
+    set cssForceActive(value) {
+        if (value)
+            this.element.setAttribute(forceActiveAttributeName, '');
+        else
+            this.element.removeAttribute(forceActiveAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
+    get cssForceVisited() {
+        return this.element.hasAttribute(forceVisitedAttributeName);
+    }
+    set cssForceVisited(value) {
+        if (value)
+            this.element.setAttribute(forceVisitedAttributeName, '');
+        else
+            this.element.removeAttribute(forceVisitedAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
+    get cssForceFocus() {
+        return this.element.hasAttribute(forceFocusAttributeName);
+    }
+    set cssForceFocus(value) {
+        if (value)
+            this.element.setAttribute(forceFocusAttributeName, '');
+        else
+            this.element.removeAttribute(forceFocusAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
+    get cssForceFocusWithin() {
+        return this.element.hasAttribute(forceFocusWithinAttributeName);
+    }
+    set cssForceFocusWithin(value) {
+        if (value)
+            this.element.setAttribute(forceFocusWithinAttributeName, '');
+        else
+            this.element.removeAttribute(forceFocusWithinAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
+    get cssForceFocusVisible() {
+        return this.element.hasAttribute(forceFocusVisibleAttributeName);
+    }
+    set cssForceFocusVisible(value) {
+        if (value)
+            this.element.setAttribute(forceFocusVisibleAttributeName, '');
+        else
+            this.element.removeAttribute(forceFocusVisibleAttributeName);
+        this.instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'changed', designItems: [this] });
+    }
 }

package/dist/elements/item/IDesignItem.d.ts

@@ -62,6 +62,13 @@ export interface IDesignItem {
     getStyleFromSheetOrLocal(name: string, fallback?: string): any;
     getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): any;
     getAllStyles(): IStyleRule[];
+    readonly hasForcedCss: boolean;
+    cssForceHover: boolean;
+    cssForceActive: boolean;
+    cssForceVisited: boolean;
+    cssForceFocus: boolean;
+    cssForceFocusWithin: boolean;
+    cssForceFocusVisible: boolean;
     attributes(): Iterable<[name: string, value: string]>;
     getAttribute(name: string): string;
     hasAttribute(name: string): boolean;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -96,6 +96,8 @@ import { GridChildResizeExtensionProvider } from '../widgets/designerView/extens
 import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
 import { BasicWebcomponentPropertiesService } from './propertiesService/services/BasicWebcomponentPropertiesService.js';
 import { PreviousElementSelectExtensionProvider } from '../widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js';
+import { ForceCssContextMenu } from '../widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js';
+import { OptionsContextMenuButton } from '../widgets/designerView/extensions/buttons/OptionsContextMenuButton.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -198,7 +200,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.designerPointerExtensions.push(
     //new CursorLinePointerExtensionProvider()
     );
-    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new ToolbarExtensionsDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton());
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new ToolbarExtensionsDesignViewConfigButtons(), new ButtonSeperatorProvider(30), new RoundPixelsDesignViewConfigButton(), new ButtonSeperatorProvider(30), new OptionsContextMenuButton());
     serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider(), new SeperatorToolProvider(22), new DrawToolButtonProvider(), new SeperatorToolProvider(22), new TextToolButtonProvider(), new SeperatorToolProvider(22), new TransformToolButtonProvider());
     serviceContainer.designerContextMenuExtensions = [
         new ChildContextMenu('edit', new CopyPasteContextMenu()),
@@ -207,6 +209,8 @@ export function createDefaultServiceContainer() {
         new SeperatorContextMenu(),
         new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()),
         new SeperatorContextMenu(),
+        new ChildContextMenu('force', new ForceCssContextMenu()),
+        new SeperatorContextMenu(),
         new MultipleItemsSelectedContextMenu(),
         new PathContextMenu(),
         new RectContextMenu(),

package/dist/elements/services/contentService/IContentChanged.d.ts

@@ -3,7 +3,7 @@ interface IContentChangedParsed {
     changeType: 'parsed';
 }
 interface IContentChangedWithDesignItems {
-    changeType: "added" | "removed" | "moved";
+    changeType: "added" | "removed" | "moved" | "changed";
     designItems: IDesignItem[];
 }
 export type IContentChanged = IContentChangedParsed | IContentChangedWithDesignItems;

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

@@ -316,7 +316,16 @@
             "wrap-reverse"
         ]
     },
-    "float": {},
+    "float": {
+        "type": "list",
+        "values": [
+            "none",
+            "left",
+            "right",
+            "inline-start",
+            "inline-end"
+        ]
+    },
     "floodColor": {
         "type": "color"
     },

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

@@ -1,6 +1,7 @@
 import { ITransactionItem } from './ITransactionItem.js';
 import { IDesignItem } from '../../item/IDesignItem.js';
 export declare class ChangeGroup implements ITransactionItem {
+    redoBranches?: ITransactionItem[][];
     title: string;
     get affectedItems(): IDesignItem[];
     private commitHandler;

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

@@ -1,4 +1,5 @@
 export class ChangeGroup {
+    redoBranches;
     title;
     get affectedItems() {
         let s = new Set();

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

@@ -5,4 +5,5 @@ export interface ITransactionItem {
     do: () => void;
     undo: () => void;
     mergeWith(other: ITransactionItem): boolean;
+    redoBranches?: ITransactionItem[][];
 }

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

@@ -12,4 +12,6 @@ export interface IUndoService extends IService {
     redo(): any;
     getUndoEntries(count?: number): Generator<string, void, unknown>;
     getRedoEntries(count?: number): Generator<string, void, unknown>;
+    readonly undoCount: number;
+    readonly redoCount: number;
 }

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

@@ -7,7 +7,8 @@ export declare class UndoService implements IUndoService {
     private _redoStack;
     private _transactionStack;
     private _designerCanvas;
-    constructor(designerCanvas: IDesignerCanvas);
+    private _storeRedoBranches;
+    constructor(designerCanvas: IDesignerCanvas, storeRedoBranches?: boolean);
     openGroup(title: string): ChangeGroup;
     private commitTransactionItem;
     private abortTransactionItem;
@@ -18,6 +19,8 @@ export declare class UndoService implements IUndoService {
     redo(): void;
     canUndo(): boolean;
     canRedo(): boolean;
+    get undoCount(): number;
+    get redoCount(): number;
     getUndoEntries(count?: number): Generator<string, void, unknown>;
     getRedoEntries(count?: number): Generator<string, void, unknown>;
 }

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

@@ -7,8 +7,10 @@ export class UndoService {
     _redoStack = [];
     _transactionStack = [];
     _designerCanvas;
-    constructor(designerCanvas) {
+    _storeRedoBranches;
+    constructor(designerCanvas, storeRedoBranches = false) {
         this._designerCanvas = designerCanvas;
+        this._storeRedoBranches = storeRedoBranches;
     }
     openGroup(title) {
         let t = new ChangeGroup(title, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
@@ -26,8 +28,13 @@ export class UndoService {
                 this._transactionStack[this._transactionStack.length - 1].addCommitedSubchangeGroup(itm);
             }
             else {
-                this._undoStack.push(itm);
+                if (this._storeRedoBranches && this._redoStack.length) {
+                    if (itm.redoBranches == null)
+                        itm.redoBranches = [];
+                    itm.redoBranches.push(this._redoStack);
+                }
                 this._redoStack = [];
+                this._undoStack.push(itm);
             }
         }
         if (this._transactionStack.length == 0) {
@@ -48,8 +55,13 @@ export class UndoService {
     execute(item) {
         if (this._transactionStack.length == 0) {
             item.do();
-            this._undoStack.push(item);
+            if (this._storeRedoBranches && this._redoStack.length) {
+                if (item.redoBranches == null)
+                    item.redoBranches = [];
+                item.redoBranches.push(this._redoStack);
+            }
             this._redoStack = [];
+            this._undoStack.push(item);
         }
         else {
             this._transactionStack[this._transactionStack.length - 1].execute(item);
@@ -110,6 +122,12 @@ export class UndoService {
     canRedo() {
         return this._redoStack.length > 0;
     }
+    get undoCount() {
+        return this._undoStack.length;
+    }
+    get redoCount() {
+        return this._redoStack.length;
+    }
     *getUndoEntries(count = 999) {
         for (let i = Math.min(this._undoStack.length, count) - 1; i >= 0; i--)
             yield this._undoStack[i].title;

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

@@ -5,6 +5,13 @@ export declare class DesignContext implements IDesignContext {
     npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
+        gridExtensionShowOverlay: boolean;
+        flexboxExtensionShowOverlay: boolean;
+        invisibleElementExtensionShowOverlay: boolean;
+        enableStylesheetService: boolean;
+        basicStackedToolbarExtensionShowOverlay: boolean;
+        simulateHoverOnHover: boolean;
+        selectUnhitableElements: boolean;
     };
     extensionOptionsChanged: TypedEvent<void>;
 }

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

@@ -2,6 +2,14 @@ import { TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class DesignContext {
     imports = [];
     npmPackages = [];
-    extensionOptions = {};
+    extensionOptions = {
+        gridExtensionShowOverlay: false,
+        flexboxExtensionShowOverlay: false,
+        invisibleElementExtensionShowOverlay: false,
+        enableStylesheetService: false,
+        basicStackedToolbarExtensionShowOverlay: false,
+        simulateHoverOnHover: false,
+        selectUnhitableElements: false,
+    };
     extensionOptionsChanged = new TypedEvent;
 }

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

@@ -4,6 +4,13 @@ export interface IDesignContext {
     npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
+        gridExtensionShowOverlay: boolean;
+        flexboxExtensionShowOverlay: boolean;
+        invisibleElementExtensionShowOverlay: boolean;
+        enableStylesheetService: boolean;
+        basicStackedToolbarExtensionShowOverlay: boolean;
+        simulateHoverOnHover: boolean;
+        selectUnhitableElements: boolean;
     };
     extensionOptionsChanged: TypedEvent<void>;
 }

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

@@ -126,6 +126,8 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     getNormalizedOffsetInElement(event: MouseEvent, element: Element): IPoint;
     elementsFromPoint(x: number, y: number): Element[];
     getElementAtPoint(point: IPoint, ignoreElementCallback?: (element: HTMLElement) => boolean): HTMLElement;
+    _patchStylesheetForDesigner(text: string): string;
+    private _hoverElement;
     showHoverExtension(element: Element, event: Event): void;
     private _onWheel;
     private _pointerEventHandler;

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

@@ -1,6 +1,6 @@
 import { EventNames } from '../../../enums/EventNames.js';
 import { InstanceServiceContainer } from '../../services/InstanceServiceContainer.js';
-import { DesignItem } from '../../item/DesignItem.js';
+import { DesignItem, forceActiveAttributeName, forceFocusAttributeName, forceFocusVisibleAttributeName, forceFocusWithinAttributeName, forceHoverAttributeName, forceVisitedAttributeName } from '../../item/DesignItem.js';
 import { BaseCustomWebComponentLazyAppend, css, html, TypedEvent, cssFromString } from '@node-projects/base-custom-webcomponent';
 import { dragDropFormatNameBindingObject } from '../../../Constants.js';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction.js';
@@ -339,7 +339,7 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
         if (this.instanceServiceContainer.stylesheetService) {
             styles.push(...this.instanceServiceContainer.stylesheetService
                 .getStylesheets()
-                .map(x => cssFromString(x.content)));
+                .map(x => cssFromString(this._patchStylesheetForDesigner(x.content))));
         }
         this._canvasShadowRoot.adoptedStyleSheets = styles;
     }
@@ -445,9 +445,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
             case CommandType.undo:
                 this.instanceServiceContainer.undoService.undo();
                 break;
+            case CommandType.holdUndo:
+                let undoEntries = this.instanceServiceContainer.undoService.getUndoEntries(20);
+                let undoMnu = Array.from(undoEntries).map((x, idx) => ({ title: 'undo: ' + x, action: () => { for (let i = 0; i <= idx; i++)
+                        this.instanceServiceContainer.undoService.undo(); } }));
+                if (undoMnu.length > 0)
+                    ContextMenu.show(undoMnu, command.event, { mode: 'undo' });
+                break;
             case CommandType.redo:
                 this.instanceServiceContainer.undoService.redo();
                 break;
+            case CommandType.holdRedo:
+                let redoEntries = this.instanceServiceContainer.undoService.getRedoEntries(20);
+                let redoMnu = Array.from(redoEntries).map((x, idx) => ({ title: 'redo: ' + x, action: () => { for (let i = 0; i <= idx; i++)
+                        this.instanceServiceContainer.undoService.redo(); } }));
+                if (redoMnu.length > 0)
+                    ContextMenu.show(redoMnu, command.event, { mode: 'undo' });
+                break;
             case CommandType.copy:
                 this.handleCopyCommand();
                 break;
@@ -1032,10 +1046,23 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 currentElement = null;
                 continue;
             }
+            if (!this.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements && DesignItem.GetDesignItem(currentElement).getStyleFromSheetOrLocal('pointer-events') == 'none') {
+                currentElement = null;
+                continue;
+            }
             break;
         }
         return currentElement;
     }
+    _patchStylesheetForDesigner(text) {
+        return text.replaceAll(':hover', '[' + forceHoverAttributeName + ']')
+            .replaceAll(':active', '[' + forceActiveAttributeName + ']')
+            .replaceAll(':visited', '[' + forceVisitedAttributeName + ']')
+            .replaceAll(':focus', '[' + forceFocusAttributeName + ']')
+            .replaceAll(':focus-within', '[' + forceFocusWithinAttributeName + ']')
+            .replaceAll(':focus-visible', '[' + forceFocusVisibleAttributeName + ']');
+    }
+    _hoverElement;
     showHoverExtension(element, event) {
         const currentDesignItem = DesignItem.GetOrCreateDesignItem(element, element, this.serviceContainer, this.instanceServiceContainer);
         if (this._lastHoverDesignItem != currentDesignItem) {
@@ -1045,6 +1072,24 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
                 this.extensionManager.applyExtension(currentDesignItem, ExtensionType.MouseOver, event);
             this._lastHoverDesignItem = currentDesignItem;
         }
+        if (this.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover && this._hoverElement !== element) {
+            let el = this._hoverElement;
+            while (el && el !== this._canvas) {
+                el.removeAttribute(forceHoverAttributeName);
+                el = el.parentElement;
+            }
+            this._hoverElement = null;
+            if (element) {
+                if (element.nodeType == NodeType.TextNode)
+                    element = element.parentElement;
+                el = element;
+                while (el && el !== this._canvas) {
+                    el.setAttribute(forceHoverAttributeName, '');
+                    el = el.parentElement;
+                }
+                this._hoverElement = element;
+            }
+        }
     }
     _onWheel(event) {
         let el = this.getElementAtPoint({ x: event.clientX, y: event.clientY });

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

@@ -3,11 +3,17 @@ import { AbstractExtension } from "./AbstractExtension.js";
 export const basicStackedToolbarExtensionOverlayOptionName = 'basicStackedToolbarExtensionShowOverlay';
 export class BasicStackedToolbarExtension extends AbstractExtension {
     static basicTemplate = `
+      <select title="position" id="position" style="pointer-events: all; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
+        <option>static</option>
+        <option>relative</option>
+        <option>absolute</option>
+        <option>fixed</option>
+      </select>
       <node-projects-image-button-list-selector id="inline" no-value-in-header property="inline">
         <img data-value="block" title="block" src="${assetsPath}images/display/block.svg">
         <img data-value="inline" title="inline" src="${assetsPath}images/display/inline.svg">
       </node-projects-image-button-list-selector>
-      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 70px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
+      <select title="display" id="displayType" style="pointer-events: all; height: 24px; width: 80px; padding: 0; font-weight: 900; text-transform: uppercase; margin-left: 5px; margin-right: 10px;">
         <option>block</option>
         <option>flex</option>
         <option>grid</option>
@@ -15,7 +21,7 @@ export class BasicStackedToolbarExtension extends AbstractExtension {
   `;
     static toolBars = [];
     _toolbar;
-    _size = { width: 200, height: 30 };
+    _size = { width: 220, height: 30 };
     _display;
     _inline;
     constructor(extensionManager, designerView, extendedItem) {
@@ -28,6 +34,14 @@ export class BasicStackedToolbarExtension extends AbstractExtension {
         //@ts-ignore
         this._toolbar = this.createToolbar(this.constructor.template, this._size.width, this._size.height);
         BasicStackedToolbarExtension.toolBars.push(this._toolbar);
+        const positionEl = this._toolbar.getById('position');
+        if (positionEl) {
+            positionEl.value = cs.position;
+            positionEl.onchange = async () => {
+                await this.extendedItem.updateStyleInSheetOrLocalAsync('position', positionEl.value);
+                this.extensionManager.reapplyAllAppliedExtentions([this.extendedItem]);
+            };
+        }
         const displayTypeEl = this._toolbar.getById('displayType');
         if (displayTypeEl) {
             displayTypeEl.value = this._display;

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

@@ -24,11 +24,15 @@ export class ElementDragTitleExtension extends AbstractExtension {
             this._rect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 15, 'svg-primary-selection-move', this._rect);
             this._clickRect = this._drawRect(transformedCornerPoints[0].x, transformedCornerPoints[0].y, this._width, 18, 'svg-invisible', this._clickRect);
             this._clickRect.style.background = 'transparent';
-            this._text = this._drawHTML('<div style="position:relative"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0; padding-left: 2px;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
+            this._text = this._drawHTML('<div style="position:relative; pointer-events: none;"><span style="width: 100%; position: absolute; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 0; padding-left: 2px;">' + text + '</span></div>', (boundRect.x - this.designerCanvas.containerBoundingRect.x) / this.designerCanvas.scaleFactor, transformedCornerPoints[0].y - 16, this._width, 15, 'svg-text-primary', this._text);
             this._text.style.overflow = 'visible';
             this._clickRect.addEventListener('pointerdown', (e) => this._pointerEvent(e));
             this._clickRect.addEventListener('pointermove', (e) => this._pointerEvent(e));
             this._clickRect.addEventListener('pointerup', (e) => this._pointerEvent(e));
+            this._clickRect.addEventListener('contextmenu', (e) => {
+                e.preventDefault();
+                this.designerCanvas.showDesignItemContextMenu(this.extendedItem, e);
+            });
             this.refresh(cache, event);
         }
     }
@@ -67,7 +71,8 @@ export class ElementDragTitleExtension extends AbstractExtension {
     _pointerEvent(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
+        if (event.button != 2)
+            this.designerCanvas.serviceContainer.designerTools.get(NamedTools.Pointer).pointerEventHandler(this.designerCanvas, event, this.extendedItem.element);
     }
     dispose() {
         this._removeAllOverlays();

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

@@ -10,7 +10,7 @@ export class PaddingExtension extends AbstractExtension {
     refresh() {
         const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
         const computedStyle = getComputedStyle(this.extendedItem.element);
-        if (computedStyle.margin !== '0px') {
+        if (computedStyle.padding !== '0px') {
             const left = Number.parseFloat(computedStyle.paddingLeft.replace('px', ''));
             const top = Number.parseFloat(computedStyle.paddingTop.replace('px', ''));
             const right = Number.parseFloat(computedStyle.paddingRight.replace('px', ''));

package/dist/elements/widgets/designerView/extensions/buttons/OptionsContextMenuButton.d.ts

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

package/dist/elements/widgets/designerView/extensions/buttons/OptionsContextMenuButton.js

@@ -0,0 +1,33 @@
+import { ContextMenu } from "../../../../helper/contextMenu/ContextMenu.js";
+export class OptionsContextMenuButton {
+    constructor() {
+    }
+    provideButtons(designerView, designerCanvas) {
+        const btn = document.createElement('div');
+        btn.innerHTML = 'O';
+        btn.title = 'options';
+        btn.className = 'toolbar-control';
+        btn.onclick = (e) => {
+            this.showCtxMenu(e, designerCanvas);
+        };
+        btn.oncontextmenu = (e) => {
+            e.preventDefault();
+            this.showCtxMenu(e, designerCanvas);
+        };
+        return [btn];
+    }
+    showCtxMenu(event, designerCanvas) {
+        ContextMenu.show([
+            {
+                title: 'simulate hover on hover', checked: designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover, action: () => {
+                    designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover = !designerCanvas.instanceServiceContainer.designContext.extensionOptions.simulateHoverOnHover;
+                }
+            },
+            {
+                title: 'select unhitable elements', checked: designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements, action: () => {
+                    designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements = !designerCanvas.instanceServiceContainer.designContext.extensionOptions.selectUnhitableElements;
+                }
+            }
+        ], event);
+    }
+}

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

@@ -0,0 +1,8 @@
+import { IContextMenuItem } from '../../../../helper/contextMenu/IContextMenuItem.js';
+import { IDesignItem } from '../../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../IDesignerCanvas.js';
+import { ContextmenuInitiator, IContextMenuExtension } from './IContextMenuExtension.js';
+export declare class ForceCssContextMenu implements IContextMenuExtension {
+    shouldProvideContextmenu(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem, initiator: ContextmenuInitiator): boolean;
+    provideContextMenuItems(event: MouseEvent, designerView: IDesignerCanvas, designItem: IDesignItem): IContextMenuItem[];
+}

package/dist/elements/widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js

@@ -0,0 +1,16 @@
+import { NodeType } from '../../../../item/NodeType.js';
+export class ForceCssContextMenu {
+    shouldProvideContextmenu(event, designerView, designItem, initiator) {
+        return designItem != null && designItem.nodeType == NodeType.Element;
+    }
+    provideContextMenuItems(event, designerView, designItem) {
+        return [
+            { title: ':hover', action: () => { designItem.cssForceHover = !designItem.cssForceHover; }, checked: designItem.cssForceHover },
+            { title: ':active', action: () => { designItem.cssForceActive = !designItem.cssForceActive; }, checked: designItem.cssForceActive },
+            { title: ':visited', action: () => { designItem.cssForceVisited = !designItem.cssForceVisited; }, checked: designItem.cssForceVisited },
+            { title: ':focus', action: () => { designItem.cssForceFocus = !designItem.cssForceFocus; }, checked: designItem.cssForceFocus },
+            { title: ':focus-within', action: () => { designItem.cssForceFocusWithin = !designItem.cssForceFocusWithin; }, checked: designItem.cssForceFocusWithin },
+            { title: ':focus-visible', action: () => { designItem.cssForceFocusVisible = !designItem.cssForceFocusVisible; }, checked: designItem.cssForceFocusVisible },
+        ];
+    }
+}

package/dist/elements/widgets/designerView/extensions/flex/FlexToolbarExtension.js

@@ -43,7 +43,7 @@ export class FlexToolbarExtension extends BasicStackedToolbarExtension {
   `;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
-        this._size.width = 515;
+        this._size.width = 625;
     }
     extend(cache, event) {
         super.extend(cache, event);

package/dist/elements/widgets/designerView/extensions/grid/GridToolbarExtension.js

@@ -46,7 +46,7 @@ export class GridToolbarExtension extends BasicStackedToolbarExtension {
   `;
     constructor(extensionManager, designerView, extendedItem) {
         super(extensionManager, designerView, extendedItem);
-        this._size.width = 524;
+        this._size.width = 624;
     }
     extend(cache, event) {
         super.extend(cache, event);

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

@@ -43,7 +43,6 @@ export class DrawElementTool {
         this._createdItem.setStyle('top', roundValue(this._createdItem, evPos.y) + 'px');
         this._createdItem.setStyle('width', '0');
         this._createdItem.setStyle('height', '0');
-        this._createdItem.element.style.overflow = 'hidden';
         designerCanvas.rootDesignItem.insertChild(this._createdItem);
         //draw via containerService??? how to draw into a grid, a stackpanel???
         designerCanvas.instanceServiceContainer.selectionService.clearSelectedElements();

package/dist/index.d.ts

@@ -267,6 +267,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperato
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/OptionsContextMenuButton.js";
 export type { IDesignViewConfigButtonsProvider } from './elements/widgets/designerView/extensions/buttons/IDesignViewConfigButtonsProvider.js';
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
@@ -284,6 +285,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeft
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js";
 export type { IDesignerPointerExtension } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtension.js";
 export type { IDesignerPointerExtensionProvider } from "./elements/widgets/designerView/extensions/pointerExtensions/IDesignerPointerExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";

package/dist/index.js

@@ -208,6 +208,7 @@ export * from "./elements/widgets/designerView/extensions/buttons/ButtonSeperato
 export * from "./elements/widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js";
 export * from "./elements/widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js";
+export * from "./elements/widgets/designerView/extensions/buttons/OptionsContextMenuButton.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtension.js";
 export * from "./elements/widgets/designerView/extensions/EditText/EditTextExtensionProvider.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/ChildContextMenu.js";
@@ -223,6 +224,7 @@ export * from "./elements/widgets/designerView/extensions/contextMenu/RotateLeft
 export * from "./elements/widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js";
+export * from "./elements/widgets/designerView/extensions/contextMenu/ForceCssContextMenu.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/AbstractDesignerPointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtension.js";
 export * from "./elements/widgets/designerView/extensions/pointerExtensions/CursorLinePointerExtensionProvider.js";

package/package.json

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