@node-projects/web-component-designer 0.1.247 → 0.1.248

package/dist/elements/services/DefaultServiceBootstrap.ts.REMOTE.js

@@ -0,0 +1,220 @@
+import { ServiceContainer } from './ServiceContainer.js';
+import { PolymerPropertiesService } from './propertiesService/services/PolymerPropertiesService.js';
+import { LitElementPropertiesService } from './propertiesService/services/LitElementPropertiesService.js';
+import { NativeElementsPropertiesService } from './propertiesService/services/NativeElementsPropertiesService.js';
+import { SVGElementsPropertiesService } from './propertiesService/services/SVGElementsPropertiesService.js';
+import { DefaultInstanceService } from './instanceService/DefaultInstanceService.js';
+import { DefaultEditorTypesService } from './propertiesService/DefaultEditorTypesService.js';
+import { BaseCustomWebComponentPropertiesService } from './propertiesService/services/BaseCustomWebComponentPropertiesService.js';
+import { DefaultPlacementService } from './placementService/DefaultPlacementService.js';
+import { DefaultHtmlParserService } from './htmlParserService/DefaultHtmlParserService.js';
+import { Lit2PropertiesService } from './propertiesService/services/Lit2PropertiesService.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { ElementDragTitleExtensionProvider } from '../widgets/designerView/extensions/ElementDragTitleExtensionProvider.js';
+import { TransformOriginExtensionProvider } from '../widgets/designerView/extensions/TransformOriginExtensionProvider.js';
+import { MarginExtensionProvider } from '../widgets/designerView/extensions/MarginExtensionProvider.js';
+import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
+import { HighlightElementExtensionProvider } from '../widgets/designerView/extensions/HighlightElementExtensionProvider.js';
+import { NamedTools } from '../widgets/designerView/tools/NamedTools.js';
+import { PointerTool } from '../widgets/designerView/tools/PointerTool.js';
+import { DrawPathTool } from '../widgets/designerView/tools/DrawPathTool.js';
+import { SelectionDefaultExtensionProvider } from '../widgets/designerView/extensions/SelectionDefaultExtensionProvider.js';
+import { ResizeExtensionProvider } from '../widgets/designerView/extensions/ResizeExtensionProvider.js';
+import { RotateExtensionProvider } from '../widgets/designerView/extensions/RotateExtensionProvider.js';
+import { ZoomTool } from '../widgets/designerView/tools/ZoomTool.js';
+import { PanTool } from '../widgets/designerView/tools/PanTool.js';
+import { CopyPasteContextMenu } from '../widgets/designerView/extensions/contextMenu/CopyPasteContextMenu.js';
+import { ZMoveContextMenu } from '../widgets/designerView/extensions/contextMenu/ZMoveContextMenu.js';
+import { MultipleItemsSelectedContextMenu } from '../widgets/designerView/extensions/contextMenu/MultipleItemsSelectedContextMenu.js';
+import { RectangleSelectorTool } from '../widgets/designerView/tools/RectangleSelectorTool.js';
+import { MagicWandSelectorTool } from '../widgets/designerView/tools/MagicWandSelectorTool.js';
+import { PickColorTool } from '../widgets/designerView/tools/PickColorTool.js';
+import { TextTool } from '../widgets/designerView/tools/TextTool.js';
+import { GrayOutExtensionProvider } from '../widgets/designerView/extensions/GrayOutExtensionProvider.js';
+import { AltToEnterContainerExtensionProvider } from '../widgets/designerView/extensions/AltToEnterContainerExtensionProvider.js';
+import { InvisibleElementExtensionProvider } from '../widgets/designerView/extensions/InvisibleElementExtensionProvider.js';
+import { ItemsBelowContextMenu } from '../widgets/designerView/extensions/contextMenu/ItemsBelowContextMenu.js';
+import { GridPlacementService } from './placementService/GridPlacementService.js';
+import { ElementAtPointService } from './elementAtPointService/ElementAtPointService.js';
+import { FlexBoxPlacementService } from './placementService/FlexBoxPlacementService.js';
+import { SnaplinesProviderService } from './placementService/SnaplinesProviderService.js';
+import { ExternalDragDropService } from './dragDropService/ExternalDragDropService.js';
+import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
+import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
+import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
+import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js';
+import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js';
+import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
+import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
+import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
+import { HtmlWriterService } from './htmlWriterService/HtmlWriterService.js';
+import { RectContextMenu } from '../widgets/designerView/extensions/contextMenu/RectContextMenu.js';
+import { PathContextMenu } from '../widgets/designerView/extensions/contextMenu/PathContextMenu.js';
+import { SeperatorContextMenu } from '../widgets/designerView/extensions/contextMenu/SeperatorContextMenu.js';
+import { ZoomToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/ZoomToElementContextMenu.js';
+import { RotateLeftAndRight } from '../widgets/designerView/extensions/contextMenu/RotateLeftAndRightContextMenu.js';
+import { SelectAllChildrenContextMenu } from '../widgets/designerView/extensions/contextMenu/SelectAllChildrenContextMenu.js';
+import { PointerToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/PointerToolButtonProvider.js';
+import { SeperatorToolProvider } from '../widgets/designerView/tools/toolBar/buttons/SeperatorToolProvider.js';
+import { ZoomToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/ZoomToolButtonProvider.js';
+import { DrawToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/DrawToolButtonProvider.js';
+import { TextToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TextToolButtonProvider.js';
+import { SelectorToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/SelectorToolButtonProvider.js';
+import { GrayOutDragOverContainerExtensionProvider } from '../widgets/designerView/extensions/GrayOutDragOverContainerExtensionProvider.js';
+import { PropertyGroupsService } from './propertiesService/PropertyGroupsService.js';
+import { PlacementExtensionProvider } from '../widgets/designerView/extensions/PlacementExtensionProvider.js';
+import { FlexboxExtensionProvider } from '../widgets/designerView/extensions/FlexboxExtensionProvider.js';
+import { FlexboxExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/FlexboxExtensionDesignViewConfigButtons.js';
+import { InvisibleElementExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/InvisibleElementExtensionDesignViewConfigButtons.js';
+import { UndoService } from './undoService/UndoService.js';
+import { SelectionService } from './selectionService/SelectionService.js';
+import { ContentService } from './contentService/ContentService.js';
+import { StylesheetServiceDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/StylesheetServiceDesignViewConfigButtons.js';
+import { JumpToElementContextMenu } from '../widgets/designerView/extensions/contextMenu/JumpToElementContextMenu.js';
+import { EditGridColumnRowSizesExtensionProvider } from '../widgets/designerView/extensions/grid/EditGridColumnRowSizesExtensionProvider.js';
+import { DisplayGridExtensionProvider } from '../widgets/designerView/extensions/grid/DisplayGridExtensionProvider.js';
+import { ApplyFirstMachingExtensionProvider } from '../widgets/designerView/extensions/logic/ApplyFirstMachingExtensionProvider.js';
+import { DesignItemDocumentPositionService } from './designItemDocumentPositionService/DesignItemDocumentPositionService.js';
+import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolBar/buttons/TransformToolButtonProvider.js';
+import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js';
+import { DragDropService } from './dragDropService/DragDropService.js';
+import { EventsService } from './eventsService/EventsService.js';
+import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
+import { DrawElementTool } from '../widgets/designerView/tools/DrawElementTool.js';
+import { RoundPixelsDesignViewConfigButton } from '../widgets/designerView/extensions/buttons/RoundPixelsDesignViewConfigButton.js';
+import { MathMLElementsPropertiesService } from './propertiesService/services/MathMLElementsPropertiesService.js';
+import { SvgElementExtensionProvider } from '../widgets/designerView/extensions/svg/SvgElementExtensionProvider.js';
+import { ConditionExtensionProvider } from '../widgets/designerView/extensions/logic/ConditionExtensionProvider.js';
+import { GridToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridToolbarExtensionProvider.js';
+import { FlexToolbarExtensionProvider } from '../widgets/designerView/extensions/flex/FlexToolbarExtensionProvider.js';
+import { BlockToolbarExtensionProvider } from '../widgets/designerView/extensions/block/BlockToolbarExtensionProvider.js';
+import { ChildContextMenu } from '../widgets/designerView/extensions/contextMenu/ChildContextMenu.js';
+import { GridChildToolbarExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildToolbarExtensionProvider.js';
+import { ToolbarExtensionsDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/ToolbarExtensionsDesignViewConfigButtons.js';
+import { PaddingExtensionProvider } from '../widgets/designerView/extensions/PaddingExtensionProvider.js';
+import { GridChildResizeExtensionProvider } from '../widgets/designerView/extensions/grid/GridChildResizeExtensionProvider.js';
+import { AlignItemsContextMenu } from '../widgets/designerView/extensions/contextMenu/AlignItemsContextMenu.js';
+import { BasicWebcomponentPropertiesService } from './propertiesService/services/BasicWebcomponentPropertiesService.js';
+import { PreviousElementSelectExtensionProvider } from '../widgets/designerView/extensions/PreviousElementSelectExtensionProvider.js';
+export function createDefaultServiceContainer() {
+    let serviceContainer = new ServiceContainer();
+    let defaultPlacementService = new DefaultPlacementService();
+    serviceContainer.register("containerService", defaultPlacementService);
+    serviceContainer.register("containerService", new GridPlacementService(defaultPlacementService));
+    serviceContainer.register("containerService", new FlexBoxPlacementService(defaultPlacementService));
+    serviceContainer.register("propertyService", new BasicWebcomponentPropertiesService());
+    serviceContainer.register("propertyService", new PolymerPropertiesService());
+    serviceContainer.register("propertyService", new LitElementPropertiesService());
+    serviceContainer.register("propertyService", new NativeElementsPropertiesService());
+    serviceContainer.register("propertyService", new SVGElementsPropertiesService());
+    serviceContainer.register("propertyService", new MathMLElementsPropertiesService());
+    serviceContainer.register("propertyService", new Lit2PropertiesService());
+    serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
+    serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
+    serviceContainer.register("instanceService", new DefaultInstanceService());
+    serviceContainer.register("editorTypesService", new DefaultEditorTypesService());
+    serviceContainer.register("htmlWriterService", new HtmlWriterService());
+    serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
+    serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
+    serviceContainer.register("elementAtPointService", new ElementAtPointService());
+    serviceContainer.register("externalDragDropService", new ExternalDragDropService());
+    serviceContainer.register("dragDropService", new DragDropService());
+    serviceContainer.register("copyPasteService", new CopyPasteService());
+    serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("demoProviderService", new SimpleDemoProviderService());
+    serviceContainer.register("eventsService", new EventsService());
+    serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
+    serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
+    serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
+    serviceContainer.register("designItemDocumentPositionService", (designerCanvas) => new DesignItemDocumentPositionService(designerCanvas));
+    serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
+        new InvisibleElementExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new PreviousElementSelectExtensionProvider(),
+        new TransformOriginExtensionProvider(true),
+        new MarginExtensionProvider(),
+        new PaddingExtensionProvider(),
+        new PositionExtensionProvider(),
+        new SvgElementExtensionProvider(),
+        new ApplyFirstMachingExtensionProvider(new GridChildResizeExtensionProvider(), new ResizeExtensionProvider(true)),
+        new RotateExtensionProvider(),
+        new ConditionExtensionProvider(new MultipleSelectionRectExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionRefreshed, [
+        new GridChildToolbarExtensionProvider(),
+        new GridToolbarExtensionProvider(),
+        new FlexToolbarExtensionProvider(),
+        new BlockToolbarExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Selection, [
+        new ConditionExtensionProvider(new SelectionDefaultExtensionProvider(), item => !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
+        new DisplayGridExtensionProvider('lightgray', '#8080802b'),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
+        new HighlightElementExtensionProvider(),
+        new ConditionExtensionProvider(new ElementDragTitleExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+        new ConditionExtensionProvider(new PreviousElementSelectExtensionProvider(), item => item.instanceServiceContainer.selectionService.primarySelection !== item && !(item.node instanceof SVGElement) || item.node instanceof SVGSVGElement),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Placement, [
+        new PlacementExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [
+        new GrayOutExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
+        new AltToEnterContainerExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [
+        new ApplyFirstMachingExtensionProvider(new DisplayGridExtensionProvider(), new GrayOutDragOverContainerExtensionProvider()),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Doubleclick, [
+        new EditTextExtensionProvider()
+    ]);
+    serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool());
+    serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool());
+    serviceContainer.designerTools.set(NamedTools.DrawPath, new DrawPathTool());
+    serviceContainer.designerTools.set(NamedTools.DrawRect, new DrawRectTool());
+    serviceContainer.designerTools.set(NamedTools.DrawEllipsis, new DrawEllipsisTool());
+    serviceContainer.designerTools.set(NamedTools.DrawLine, new DrawLineTool());
+    serviceContainer.designerTools.set(NamedTools.Zoom, new ZoomTool());
+    serviceContainer.designerTools.set(NamedTools.Pan, new PanTool());
+    serviceContainer.designerTools.set(NamedTools.RectangleSelector, new RectangleSelectorTool());
+    serviceContainer.designerTools.set(NamedTools.MagicWandSelector, new MagicWandSelectorTool());
+    serviceContainer.designerTools.set(NamedTools.PickColor, new PickColorTool());
+    serviceContainer.designerTools.set(NamedTools.Text, new TextTool());
+    serviceContainer.designerTools.set(NamedTools.DrawElementTool, DrawElementTool);
+    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.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()),
+        new SeperatorContextMenu(),
+        new ChildContextMenu('modify', new RotateLeftAndRight(), new SeperatorContextMenu(), new ZMoveContextMenu(), new SeperatorContextMenu(), new AlignItemsContextMenu()),
+        new SeperatorContextMenu(),
+        new ChildContextMenu('view', new JumpToElementContextMenu(), new ZoomToElementContextMenu()),
+        new SeperatorContextMenu(),
+        new MultipleItemsSelectedContextMenu(),
+        new PathContextMenu(),
+        new RectContextMenu(),
+        new SeperatorContextMenu(),
+        new SelectAllChildrenContextMenu(),
+        new SeperatorContextMenu(),
+        new ItemsBelowContextMenu(),
+    ];
+    return serviceContainer;
+}
+export default createDefaultServiceContainer;

package/dist/elements/services/designItemService/DesignItemService copy.d.ts

@@ -0,0 +1,7 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDesignItemService } from "./IDesignItemService.js";
+export declare class DesignItemService implements IDesignItemService {
+    createDesignItem(node: Node, parsedNode: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): IDesignItem;
+}

package/dist/elements/services/designItemService/DesignItemService copy.js

@@ -0,0 +1,6 @@
+import { DesignItem } from "../../item/DesignItem.js";
+export class DesignItemService {
+    createDesignItem(node, parsedNode, serviceContainer, instanceServiceContainer) {
+        return new DesignItem(node, parsedNode, serviceContainer, instanceServiceContainer);
+    }
+}

package/dist/elements/services/placementService/AbsolutePlacementService copy.d.ts

@@ -0,0 +1,19 @@
+import type { IPoint } from '../../../interfaces/IPoint.js';
+import type { IPlacementService } from './IPlacementService.js';
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+export declare class AbsolutePlacementService implements IPlacementService {
+    serviceForContainer(container: IDesignItem, containerStyle: CSSStyleDeclaration, mode: 'normal' | 'drop', item?: IDesignItem, event?: MouseEvent): boolean;
+    isEnterableContainer(container: IDesignItem): boolean;
+    canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
+    canLeave(container: IDesignItem, items: IDesignItem[]): boolean;
+    getElementOffset(container: IDesignItem, designItem?: IDesignItem): IPoint;
+    private calculateTrack;
+    placePoint(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): IPoint;
+    startPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    place(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    moveElements(designItems: IDesignItem[], position: IPoint, absolute: boolean): void;
+    enterContainer(container: IDesignItem, items: IDesignItem[], mode: 'normal' | 'drop'): void;
+    leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+}

package/dist/elements/services/placementService/AbsolutePlacementService copy.js

@@ -0,0 +1,155 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { combineTransforms, extractTranslationFromDOMMatrix, getResultingTransformationBetweenElementAndAllAncestors } from '../../helper/TransformHelper.js';
+import { filterChildPlaceItems, getDesignItemCurrentPos, placeDesignItem } from '../../helper/LayoutHelper.js';
+import { ExtensionType } from '../../widgets/designerView/extensions/ExtensionType.js';
+import { straightenLine } from '../../helper/PathDataPolyfill.js';
+export class AbsolutePlacementService {
+    serviceForContainer(container, containerStyle, mode, item, event) {
+        if (item != null && (item.getComputedStyle()?.position == 'absolute' || item.getComputedStyle()?.position == 'relative'))
+            return true;
+        /*if (containerStyle.display === 'grid' || containerStyle.display === 'inline-grid' ||
+          containerStyle.display === 'flex' || containerStyle.display === 'inline-flex')
+          return false;*/
+        return mode == 'drop' && event.ctrlKey;
+    }
+    isEnterableContainer(container) {
+        if (DomConverter.IsSelfClosingElement(container.element.localName))
+            return false;
+        if (!container.isRootItem && container.element.shadowRoot && container.element.shadowRoot.querySelector('slot') == null)
+            return false;
+        return true;
+    }
+    canEnter(container, items) {
+        if (!this.isEnterableContainer(container))
+            return false;
+        if (!items.every(x => !x.element.contains(container.element) && x !== container))
+            return false;
+        return true;
+    }
+    canLeave(container, items) {
+        return true;
+    }
+    getElementOffset(container, designItem) {
+        return container.instanceServiceContainer.designerCanvas.getNormalizedElementCoordinates(container.element);
+    }
+    calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, item) {
+        let trackX = newPoint.x - startPoint.x;
+        let trackY = newPoint.y - startPoint.y;
+        if (!event.ctrlKey) {
+            if (designerCanvas.alignOnGrid) {
+                let p = getDesignItemCurrentPos(item, 'position');
+                p.x = p.x % designerCanvas.gridSize;
+                p.y = p.y % designerCanvas.gridSize;
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize - p.x;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize - p.y;
+            }
+            else if (designerCanvas.alignOnSnap) {
+                let rect = item.element.getBoundingClientRect();
+                let newPos = designerCanvas.snapLines.snapToPosition({ x: (newPoint.x - offsetInControl.x), y: (newPoint.y - offsetInControl.y) }, { width: rect.width / designerCanvas.scaleFactor, height: rect.height / designerCanvas.scaleFactor }, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x - Math.round(startPoint.x) + Math.round(offsetInControl.x);
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y - Math.round(startPoint.y) + Math.round(offsetInControl.y);
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    placePoint(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+        let trackX = newPoint.x;
+        let trackY = newPoint.y;
+        if (!event.ctrlKey) {
+            if (designerCanvas.alignOnGrid) {
+                trackX = Math.round(trackX / designerCanvas.gridSize) * designerCanvas.gridSize;
+                trackY = Math.round(trackY / designerCanvas.gridSize) * designerCanvas.gridSize;
+            }
+            else if (designerCanvas.alignOnSnap) {
+                let newPos = designerCanvas.snapLines.snapToPosition({ x: newPoint.x - offsetInControl.x, y: newPoint.y - offsetInControl.y }, null, { x: trackX > 0 ? 1 : -1, y: trackY > 0 ? 1 : -1 });
+                if (newPos.x !== null) {
+                    trackX = newPos.x;
+                }
+                else {
+                    trackX = Math.round(trackX);
+                }
+                if (newPos.y !== null) {
+                    trackY = newPos.y;
+                }
+                else {
+                    trackY = Math.round(trackY);
+                }
+            }
+        }
+        return { x: trackX, y: trackY };
+    }
+    startPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+    }
+    place(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+        //TODO: this should revert all undo actions while active
+        //maybe a undo actions returns itself or an id so it could be changed?
+        let track = this.calculateTrack(event, designerCanvas, startPoint, offsetInControl, newPoint, items[0]);
+        if (event.shiftKey) {
+            track = straightenLine({ x: 0, y: 0 }, track, true);
+        }
+        let filteredItems = filterChildPlaceItems(items);
+        for (const designItem of filteredItems) {
+            const canvas = designItem.instanceServiceContainer.designerCanvas.rootDesignItem.element;
+            let originalElementAndAllAncestorsMultipliedMatrix = getResultingTransformationBetweenElementAndAllAncestors(designItem.parent.element, canvas, true);
+            let transformMatrixParentTransformsCompensated = null;
+            if (originalElementAndAllAncestorsMultipliedMatrix) {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0).matrixTransform(originalElementAndAllAncestorsMultipliedMatrix.inverse());
+            }
+            else {
+                transformMatrixParentTransformsCompensated = new DOMPoint(track.x, track.y, 0, 0);
+            }
+            const translationMatrix = new DOMMatrix().translate(transformMatrixParentTransformsCompensated.x, transformMatrixParentTransformsCompensated.y);
+            combineTransforms(designItem.element, designItem.getStyle('transform'), translationMatrix.toString());
+        }
+    }
+    moveElements(designItems, position, absolute) {
+        //TODO: Check if we set left or right
+        //TODO: Use CSS units
+        for (let d of designItems) {
+            if (position.x)
+                d.setStyle('left', parseInt(d.element.style.left) - position.x + 'px');
+            if (position.y)
+                d.setStyle('top', parseInt(d.element.style.top) - position.y + 'px');
+        }
+        designItems[0].instanceServiceContainer.designerCanvas.extensionManager.refreshExtensions(designItems);
+    }
+    enterContainer(container, items, mode) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            if (mode == 'drop')
+                i.setStyle('position', 'absolute');
+            container.insertChild(i);
+            if (i.lastContainerSize) {
+                if (!i.hasStyle('width'))
+                    i.setStyle('width', i.lastContainerSize.width + 'px');
+                if (!i.hasStyle('height'))
+                    i.setStyle('height', i.lastContainerSize.height + 'px');
+            }
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (const designItem of filterdItems) {
+            let translation = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.element.style.transform));
+            const stylesMapOffset = extractTranslationFromDOMMatrix(new DOMMatrix(designItem.getStyle('transform') ?? ''));
+            designItem.element.style.transform = designItem.getStyle('transform') ?? '';
+            let track = { x: translation.x, y: translation.y };
+            placeDesignItem(container, designItem, { x: track.x - stylesMapOffset.x, y: track.y - stylesMapOffset.y }, 'position');
+        }
+        for (const item of items) {
+            designerCanvas.extensionManager.removeExtension(item, ExtensionType.Placement);
+        }
+    }
+}

package/dist/elements/services/propertiesService/IProperty.d.ts

@@ -18,5 +18,6 @@ export interface IProperty {
     value?: any;
     service: IPropertiesService;
     defaultValue?: any;
+    example?: string;
     propertyType: PropertyType;
 }

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js

@@ -16,34 +16,39 @@ export class AbstractPolymerLikePropertiesService extends AbstractPropertiesServ
         for (const name in list) {
             const polymerProperty = list[name];
             let type = polymerProperty;
-            if (polymerProperty.type)
+            let description = null;
+            let example = null;
+            if (polymerProperty.type) {
                 type = polymerProperty.type;
+                description = polymerProperty.description;
+                example = polymerProperty.example;
+            }
             if (type === String) {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Object) {
-                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Number) {
-                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Date) {
-                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (type === Boolean) {
-                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else if (PropertiesHelper.isTypescriptEnum(type)) {
-                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
             else {
-                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute, description: description, example: example };
                 properties.push(property);
             }
         }

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js.map

@@ -1 +1 @@
-{"version":3,"file":"AbstractPolymerLikePropertiesService.js","sourceRoot":"","sources":["../../../../../src/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AbstractPolymerLikePropertiesService.js","sourceRoot":"","sources":["../../../../../src/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,MAAM,OAAgB,oCAAqC,SAAQ,yBAAyB;IAE1E,cAAc,CAAC,UAAuB;QACpD,OAAO,WAAW,CAAC,iBAAiB,CAAC;IACvC,CAAC;IAEe,KAAK,CAAC,aAAa,CAAC,UAAuB;QACzD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC;YACpC,OAAO,IAAI,CAAC;QACd,OAAO,IAAI,CAAC,eAAe,CAAO,UAAU,CAAC,OAAO,CAAC,WAAY,CAAC,UAAU,CAAC,CAAC;IAChF,CAAC;IAES,eAAe,CAAC,IAAS;QACjC,IAAI,UAAU,GAAgB,EAAE,CAAC;QACjC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;YACxB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,IAAI,GAAG,eAAe,CAAC;YAC3B,IAAI,WAAW,GAAG,IAAI,CAAC;YACvB,IAAI,OAAO,GAAG,IAAI,CAAC;YACnB,IAAI,eAAe,CAAC,IAAI,EAAE,CAAC;gBACzB,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC;gBAC5B,WAAW,GAAG,eAAe,CAAC,WAAW,CAAC;gBAC1C,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC;YACpC,CAAC;YAED,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBACpB,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACrK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC3B,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACrK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;gBAC3B,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACrK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;gBACzB,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACnK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACtK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,IAAI,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;gBACnD,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBAChO,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,QAAQ,GAAc,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;gBACrK,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QACD,OAAO,UAAU,CAAC;IACpB,CAAC;IAEQ,aAAa,CAAC,WAA0B,EAAE,QAAmB;QACpE,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC;CACF"}

package/dist/elements/widgets/bindings/BindingsEditor.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare enum targetType {
+    'property' = "property",
+    'style' = "style",
+    'attribute' = "attribute",
+    'event' = "event"
+}
+export declare enum valueType {
+    'string' = "string",
+    'number' = "number",
+    'boolean' = "boolean"
+}
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor(targetType: targetType);
+}

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -0,0 +1,54 @@
+import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
+export var targetType;
+(function (targetType) {
+    targetType["property"] = "property";
+    targetType["style"] = "style";
+    targetType["attribute"] = "attribute";
+    targetType["event"] = "event";
+})(targetType || (targetType = {}));
+export var valueType;
+(function (valueType) {
+    valueType["string"] = "string";
+    valueType["number"] = "number";
+    valueType["boolean"] = "boolean";
+})(valueType || (valueType = {}));
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    * { font-size: 16px; }
+    .list { 
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    `;
+    static template = html `
+   <div class="list" style="">
+    <span>Expression</span>
+    <div>
+      <input style="width:100%;">
+      <button>...</button>
+    </div>
+    <!--<span>Target</span>
+    <select id="target">
+        <option>Property</option>
+        <option>Attribute</option>
+        <option>Style</option>
+        <option>Event</option>
+    </select>-->
+    <div>
+      <input id="mode" type="checkbox"><label for="mode">Two Way</label>    
+    </div>
+    <div>
+      <input id="inverted" type="checkbox"><label for="inverted">Inverted</label>   
+    </div>
+    <div>
+      <input id="nullSafe" type="checkbox"><label for="nullSafe">Null Safe</label>   
+    </div>
+</div>
+  `;
+    constructor(targetType) {
+        super();
+    }
+}
+customElements.define('node-projects-bindings-editor', BindingsEditor);
+//# sourceMappingURL=BindingsEditor.js.map

package/dist/elements/widgets/bindings/BindingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BindingsEditor.js","sourceRoot":"","sources":["../../../../src/elements/widgets/bindings/BindingsEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,uCAAuC,EAAE,IAAI,EAAE,MAAM,yCAAyC,CAAC;AAE7G,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,mCAAuB,CAAA;IACvB,6BAAiB,CAAA;IACjB,qCAAyB,CAAA;IACzB,6BAAiB,CAAA;AACnB,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,8BAAmB,CAAA;IACnB,8BAAmB,CAAA;IACnB,gCAAqB,CAAA;AACvB,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,OAAO,cAAe,SAAQ,uCAAuC;IAEzE,MAAM,CAAmB,KAAK,GAAG,GAAG,CAAA;;;;;;;KAOjC,CAAC;IAEJ,MAAM,CAAmB,QAAQ,GAAG,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBvC,CAAC;IAEF,YAAY,UAAsB;QAChC,KAAK,EAAE,CAAC;IACV,CAAC;;AAMH,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,cAAc,CAAC,CAAC"}

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

@@ -2,6 +2,6 @@ import { IDesignItem } from "../../item/IDesignItem.js";
 export declare class DomConverter {
     static normalizeAttributeValue(value: string | number, useSingleQuotes?: boolean): string;
     static normalizeContentValue(value: string): string;
-    static IsSelfClosingElement(tag: string): tag is "link" | "img" | "area" | "base" | "br" | "col" | "embed" | "hr" | "input" | "keygen" | "meta" | "param" | "source" | "track" | "wbr";
+    static IsSelfClosingElement(tag: string): tag is "link" | "img" | "input" | "br" | "area" | "base" | "col" | "embed" | "hr" | "keygen" | "meta" | "param" | "source" | "track" | "wbr";
     static ConvertToString(designItems: IDesignItem[], beautifyOutput?: boolean, updatePositions?: boolean): string;
 }

package/dist/elements/widgets/designerView/extensions/CanvasExtension.d.ts

@@ -0,0 +1,10 @@
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IDesignerCanvas } from '../IDesignerCanvas.js';
+import { AbstractExtension } from './AbstractExtension.js';
+import { IExtensionManager } from './IExtensionManger.js';
+export declare class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager: IExtensionManager, designerView: IDesignerCanvas, extendedItem: IDesignItem);
+    extend(): void;
+    refresh(): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,31 @@
+import { AbstractExtension } from './AbstractExtension.js';
+export class CanvasExtension extends AbstractExtension {
+    constructor(extensionManager, designerView, extendedItem) {
+        super(extensionManager, designerView, extendedItem);
+    }
+    extend() {
+        this.refresh();
+    }
+    refresh() {
+        const itemRect = this.designerCanvas.getNormalizedElementCoordinates(this.extendedItem.element);
+        const computedStyle = getComputedStyle(this.extendedItem.element);
+        if (computedStyle.margin !== '0px') {
+            const left = Number.parseFloat(computedStyle.marginLeft.replace('px', ''));
+            const top = Number.parseFloat(computedStyle.marginTop.replace('px', ''));
+            const right = Number.parseFloat(computedStyle.marginRight.replace('px', ''));
+            const bottom = Number.parseFloat(computedStyle.marginBottom.replace('px', ''));
+            if (!isNaN(left) && !isNaN(top) && !isNaN(right) && !isNaN(bottom)) {
+                if (this._valuesHaveChanges(left, top, right, bottom, itemRect.x, itemRect.y, itemRect.width, itemRect.height)) {
+                    this._removeAllOverlays();
+                    this._drawRect(itemRect.x - left, itemRect.y - top, left + itemRect.width + right, top, 'svg-margin');
+                    this._drawRect(itemRect.x - left, itemRect.y, left, itemRect.height, 'svg-margin');
+                    this._drawRect(itemRect.x + itemRect.width, itemRect.y, right, itemRect.height, 'svg-margin');
+                    this._drawRect(itemRect.x - left, itemRect.y + itemRect.height, left + itemRect.width + right, bottom, 'svg-margin');
+                }
+            }
+        }
+    }
+    dispose() {
+        this._removeAllOverlays();
+    }
+}