@node-projects/web-component-designer 0.1.0 → 0.1.2

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

@@ -0,0 +1,74 @@
+import { ServiceContainer } from '../services/ServiceContainer.js';
+import { InstanceServiceContainer } from '../services/InstanceServiceContainer.js';
+import { ChangeGroup } from '../services/undoService/ChangeGroup.js';
+import { NodeType } from './NodeType.js';
+import { ExtensionType } from '../widgets/designerView/extensions/ExtensionType.js';
+import { IDesignerExtension } from '../widgets/designerView/extensions/IDesignerExtension.js';
+import { ISize } from "../../interfaces/ISize.js";
+import { IDesignerExtensionProvider } from '../widgets/designerView/extensions/IDesignerExtensionProvider.js';
+import { IStyleRule } from '../services/stylesheetService/IStylesheetService.js';
+import { IPlacementService } from '../services/placementService/IPlacementService.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface IDesignItem {
+    lastContainerSize: ISize;
+    replaceNode(newNode: Node): any;
+    nodeReplaced: TypedEvent<void>;
+    clone(): Promise<IDesignItem>;
+    readonly nodeType: NodeType;
+    readonly name: string;
+    id: string;
+    readonly isRootItem: boolean;
+    readonly hasAttributes: boolean;
+    readonly hasStyles: boolean;
+    readonly hasChildren: boolean;
+    children(): IterableIterator<IDesignItem>;
+    allMatching(selectors: string): IterableIterator<IDesignItem>;
+    readonly childCount: number;
+    readonly firstChild: IDesignItem;
+    readonly parent: IDesignItem;
+    _insertChildInternal(designItem: IDesignItem, index?: number): any;
+    _removeChildInternal(designItem: IDesignItem): any;
+    _withoutUndoSetStyle(name: string, value: string): any;
+    _withoutUndoRemoveStyle(name: string): any;
+    _withoutUndoSetAttribute(name: string, value: string): any;
+    _withoutUndoRemoveAttribute(name: string): any;
+    indexOf(designItem: IDesignItem): number;
+    insertAdjacentElement(designItem: IDesignItem, where: InsertPosition): any;
+    insertChild(designItem: IDesignItem, index?: number): any;
+    removeChild(designItem: IDesignItem): any;
+    remove(): any;
+    clearChildren(): any;
+    updateChildrenFromNodesChildren(): any;
+    readonly hasContent: boolean;
+    content: string;
+    innerHTML?: string;
+    readonly isEmptyTextNode: boolean;
+    /** Could be a special node if another parser is used */
+    readonly parsedNode: any;
+    readonly node: Node;
+    readonly element: Element;
+    serviceContainer: ServiceContainer;
+    instanceServiceContainer: InstanceServiceContainer;
+    appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
+    shouldAppliedDesignerExtensions: Map<ExtensionType, IDesignerExtensionProvider[]>;
+    getOrCreateDesignItem(node: Node): any;
+    openGroup(title: string): ChangeGroup;
+    styles(): Iterable<[name: string, value: string]>;
+    getStyle(name: string): string;
+    hasStyle(name: string): boolean;
+    setStyle(name: string, value?: string | null, important?: boolean): any;
+    removeStyle(name: string): any;
+    updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean): any;
+    getStyleFromSheetOrLocal(name: string, fallback?: string): any;
+    getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string): any;
+    getAllStyles(): IStyleRule[];
+    attributes(): Iterable<[name: string, value: string]>;
+    getAttribute(name: string): string;
+    hasAttribute(name: string): boolean;
+    setAttribute(name: string, value?: string | null): any;
+    removeAttribute(name: string): any;
+    hideAtDesignTime: boolean;
+    hideAtRunTime: boolean;
+    lockAtDesignTime: boolean;
+    getPlacementService(style?: CSSStyleDeclaration): IPlacementService;
+}

package/dist/elements/item/IDesignItem.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,8 @@
+export declare enum NodeType {
+    Element = 1,
+    Attribute = 2,
+    TextNode = 3,
+    Comment = 8,
+    Document = 9,
+    DocumentFragment = 11
+}

package/dist/elements/item/NodeType.js

@@ -0,0 +1,9 @@
+export var NodeType;
+(function (NodeType) {
+    NodeType[NodeType["Element"] = 1] = "Element";
+    NodeType[NodeType["Attribute"] = 2] = "Attribute";
+    NodeType[NodeType["TextNode"] = 3] = "TextNode";
+    NodeType[NodeType["Comment"] = 8] = "Comment";
+    NodeType[NodeType["Document"] = 9] = "Document";
+    NodeType[NodeType["DocumentFragment"] = 11] = "DocumentFragment";
+})(NodeType || (NodeType = {}));

package/dist/elements/services/BaseServiceContainer.d.ts

@@ -0,0 +1,15 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { IService } from './IService.js';
+export declare class BaseServiceContainer<NameMap> {
+    protected _services: Map<string, IService[]>;
+    servicesChanged: TypedEvent<{
+        serviceName: keyof NameMap;
+    }>;
+    getLastService<K extends keyof NameMap>(service: K): NameMap[K];
+    getServices<K extends keyof NameMap>(service: K): NameMap[K][];
+    register<K extends keyof NameMap>(name: K, service: NameMap[K]): void;
+    registerMultiple<K extends keyof NameMap>(names: K[], service: NameMap[K]): void;
+    forSomeServicesTillResult<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): Y;
+    getLastServiceWhere<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Y): NameMap[K];
+    getLastServiceWhereAsync<K extends keyof NameMap, Y>(service: K, callback: (service: NameMap[K]) => Promise<Y>): Promise<NameMap[K]>;
+}

package/dist/elements/services/BaseServiceContainer.js

@@ -0,0 +1,67 @@
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class BaseServiceContainer {
+    _services = new Map();
+    servicesChanged = new TypedEvent();
+    getLastService(service) {
+        let list = this._services.get(service);
+        if (list && list.length)
+            return list[list.length - 1];
+        return null;
+    }
+    getServices(service) {
+        return this._services.get(service);
+    }
+    register(name, service) {
+        if (!this._services.has(name))
+            this._services.set(name, []);
+        this._services.get(name).push(service);
+        this.servicesChanged.emit({ serviceName: name });
+    }
+    registerMultiple(names, service) {
+        for (const name of names) {
+            if (!this._services.has(name))
+                this._services.set(name, []);
+            this._services.get(name).push(service);
+            this.servicesChanged.emit({ serviceName: name });
+        }
+    }
+    forSomeServicesTillResult(service, callback) {
+        let services = this.getServices(service);
+        if (services == null) {
+            return null;
+        }
+        for (let index = services.length - 1; index >= 0; index--) {
+            const currentService = services[index];
+            let result = callback(currentService);
+            if (result != null)
+                return result;
+        }
+        return null;
+    }
+    getLastServiceWhere(service, callback) {
+        let services = this.getServices(service);
+        if (services == null) {
+            return null;
+        }
+        for (let index = services.length - 1; index >= 0; index--) {
+            const currentService = services[index];
+            let result = callback(currentService);
+            if (result)
+                return currentService;
+        }
+        return null;
+    }
+    async getLastServiceWhereAsync(service, callback) {
+        let services = this.getServices(service);
+        if (services == null) {
+            return null;
+        }
+        for (let index = services.length - 1; index >= 0; index--) {
+            const currentService = services[index];
+            let result = await callback(currentService);
+            if (result)
+                return currentService;
+        }
+        return null;
+    }
+}

package/dist/elements/services/DefaultServiceBootstrap.d.ts

@@ -0,0 +1,3 @@
+import { ServiceContainer } from './ServiceContainer.js';
+export declare function createDefaultServiceContainer(): ServiceContainer;
+export default createDefaultServiceContainer;

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -0,0 +1,202 @@
+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 { CanvasExtensionProvider } from '../widgets/designerView/extensions/CanvasExtensionProvider.js';
+import { PositionExtensionProvider } from '../widgets/designerView/extensions/PositionExtensionProvider.js';
+import { PathExtensionProvider } from '../widgets/designerView/extensions/svg/PathExtensionProvider.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 { LineExtensionProvider } from '../widgets/designerView/extensions/svg/LineExtensionProvider.js';
+import { RectExtentionProvider } from '../widgets/designerView/extensions/svg/RectExtensionProvider.js';
+import { EllipsisExtensionProvider } from '../widgets/designerView/extensions/svg/EllipsisExtensionProvider.js';
+import { PropertyTabsService } from './propertiesService/PropertyTabsService.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';
+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 PolymerPropertiesService());
+    serviceContainer.register("propertyService", new LitElementPropertiesService());
+    serviceContainer.register("propertyService", new NativeElementsPropertiesService());
+    serviceContainer.register("propertyService", new SVGElementsPropertiesService());
+    serviceContainer.register("propertyService", new Lit2PropertiesService());
+    serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService());
+    serviceContainer.register("propertyGroupsService", new PropertyTabsService());
+    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 ResizeExtensionProvider(false),
+        new InvisibleElementExtensionProvider(),
+        // new ElementDragTitleExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
+        new ElementDragTitleExtensionProvider(),
+        new TransformOriginExtensionProvider(),
+        new CanvasExtensionProvider(),
+        new PositionExtensionProvider(),
+        new EllipsisExtensionProvider(),
+        new LineExtensionProvider(),
+        new PathExtensionProvider(),
+        new RectExtentionProvider(),
+        new ResizeExtensionProvider(true),
+        new RotateExtensionProvider(),
+        new MultipleSelectionRectExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionAndCanBeEntered, [
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Selection, [
+        new SelectionDefaultExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainerAndCanBeEntered, [
+        new DisplayGridExtensionProvider(),
+        new EditGridColumnRowSizesExtensionProvider(),
+        new FlexboxExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
+        new HighlightElementExtensionProvider()
+    ]);
+    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.designerPointerExtensions.push(
+    //new CursorLinePointerExtensionProvider()
+    );
+    serviceContainer.designViewConfigButtons.push(new ButtonSeperatorProvider(20), new GridExtensionDesignViewConfigButtons(), new FlexboxExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new InvisibleElementExtensionDesignViewConfigButtons(), new ButtonSeperatorProvider(10), new StylesheetServiceDesignViewConfigButtons());
+    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 CopyPasteContextMenu(),
+        new SeperatorContextMenu(),
+        new RotateLeftAndRight(),
+        new SeperatorContextMenu(),
+        new JumpToElementContextMenu(),
+        new ZoomToElementContextMenu(),
+        new SeperatorContextMenu(),
+        new ZMoveContextMenu(),
+        new MultipleItemsSelectedContextMenu(),
+        new PathContextMenu(),
+        new RectContextMenu(),
+        new SeperatorContextMenu(),
+        new SelectAllChildrenContextMenu(),
+        new SeperatorContextMenu(),
+        new ItemsBelowContextMenu(),
+    ];
+    return serviceContainer;
+}
+export default createDefaultServiceContainer;

package/dist/elements/services/GlobalContext.d.ts

@@ -0,0 +1,32 @@
+import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ITool } from '../widgets/designerView/tools/ITool.js';
+import { ServiceContainer } from './ServiceContainer.js';
+import { IDesignItem } from "../item/IDesignItem.js";
+export declare class GlobalContext {
+    private _serviceContainer;
+    private _tool;
+    private _strokeColor;
+    private _strokeThickness;
+    private _fillBrush;
+    constructor(serviceContainer: ServiceContainer);
+    set tool(tool: ITool);
+    get tool(): ITool;
+    readonly onToolChanged: TypedEvent<PropertyChangedArgs<{
+        name: string;
+        tool: ITool;
+    }>>;
+    finishedWithTool: (tool: ITool) => void;
+    set strokeColor(strokeColor: string);
+    get strokeColor(): string;
+    readonly onStrokeColorChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set strokeThickness(strokeThickness: string);
+    get strokeThickness(): string;
+    readonly onStrokeThicknessChanged: TypedEvent<PropertyChangedArgs<string>>;
+    set fillBrush(fillBrush: string);
+    get fillBrush(): string;
+    readonly onFillBrushChanged: TypedEvent<PropertyChangedArgs<string>>;
+    readonly showConfigClicked: TypedEvent<{
+        configUi: Element;
+        designItem: IDesignItem;
+    }>;
+}

package/dist/elements/services/GlobalContext.js

@@ -0,0 +1,69 @@
+//Service container should not be something with changeing information, so global context is for tool and color (and maybe more)
+import { PropertyChangedArgs, TypedEvent } from "@node-projects/base-custom-webcomponent";
+export class GlobalContext {
+    _serviceContainer;
+    _tool;
+    _strokeColor = 'black';
+    _strokeThickness = '3';
+    _fillBrush = 'transparent';
+    constructor(serviceContainer) {
+        this._serviceContainer = serviceContainer;
+    }
+    set tool(tool) {
+        if (this._tool !== tool) {
+            const oldTool = this._tool;
+            if (oldTool) {
+                oldTool.dispose();
+            }
+            this._tool = tool;
+            let toolName = null;
+            for (let t of this._serviceContainer.designerTools) {
+                if (t[1] == tool)
+                    toolName = t[0];
+            }
+            this.onToolChanged.emit(new PropertyChangedArgs({ name: toolName, tool: tool }, { name: null, tool: oldTool }));
+            if (this._tool)
+                this._tool.activated(this._serviceContainer);
+        }
+    }
+    get tool() {
+        return this._tool;
+    }
+    onToolChanged = new TypedEvent();
+    finishedWithTool = () => this.tool = null;
+    set strokeColor(strokeColor) {
+        if (this._strokeColor !== strokeColor) {
+            const oldStrokeColor = this._strokeColor;
+            this._strokeColor = strokeColor;
+            this.onStrokeColorChanged.emit(new PropertyChangedArgs(strokeColor, oldStrokeColor));
+        }
+    }
+    get strokeColor() {
+        return this._strokeColor;
+    }
+    onStrokeColorChanged = new TypedEvent();
+    set strokeThickness(strokeThickness) {
+        if (this._strokeThickness !== strokeThickness) {
+            const oldStrokeThickness = this._strokeThickness;
+            this._strokeThickness = strokeThickness;
+            this.onStrokeThicknessChanged.emit(new PropertyChangedArgs(strokeThickness, oldStrokeThickness));
+        }
+    }
+    get strokeThickness() {
+        return this._strokeThickness;
+    }
+    onStrokeThicknessChanged = new TypedEvent();
+    set fillBrush(fillBrush) {
+        this._fillBrush = fillBrush;
+        if (this._fillBrush !== fillBrush) {
+            const oldFillBrush = this._fillBrush;
+            this._fillBrush = fillBrush;
+            this.onFillBrushChanged.emit(new PropertyChangedArgs(fillBrush, oldFillBrush));
+        }
+    }
+    get fillBrush() {
+        return this._fillBrush;
+    }
+    onFillBrushChanged = new TypedEvent();
+    showConfigClicked = new TypedEvent();
+}

package/dist/elements/services/IService.d.ts

@@ -0,0 +1,2 @@
+export interface IService {
+}

package/dist/elements/services/IService.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/IServiceContainer.d.ts

@@ -0,0 +1,5 @@
+export interface IServiceContainer {
+    register(name: string, service: any): any;
+    getLastService(service: string): any;
+    getServices(service: string): any[];
+}

package/dist/elements/services/IServiceContainer.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/InstanceServiceContainer.d.ts

@@ -0,0 +1,27 @@
+import { ISelectionService } from './selectionService/ISelectionService.js';
+import { IUndoService } from './undoService/IUndoService.js';
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { IContentService } from './contentService/IContentService.js';
+import { IDesignContext } from '../widgets/designerView/IDesignContext.js';
+import { IDesignerCanvas } from '../widgets/designerView/IDesignerCanvas.js';
+import { IStylesheetService } from './stylesheetService/IStylesheetService.js';
+import { IDesignItemDocumentPositionService } from './designItemDocumentPositionService/IDesignItemDocumentPositionService.js';
+interface InstanceServiceNameMap {
+    "undoService": IUndoService;
+    "selectionService": ISelectionService;
+    "contentService": IContentService;
+    "stylesheetService": IStylesheetService;
+    "designItemDocumentPositionService": IDesignItemDocumentPositionService;
+}
+export declare class InstanceServiceContainer extends BaseServiceContainer<InstanceServiceNameMap> {
+    designContext: IDesignContext;
+    readonly designerCanvas: IDesignerCanvas;
+    designer: any;
+    constructor(designerCanvas: IDesignerCanvas);
+    get undoService(): IUndoService;
+    get selectionService(): ISelectionService;
+    get contentService(): IContentService;
+    get stylesheetService(): IStylesheetService;
+    get designItemDocumentPositionService(): IDesignItemDocumentPositionService;
+}
+export {};

package/dist/elements/services/InstanceServiceContainer.js

@@ -0,0 +1,26 @@
+import { BaseServiceContainer } from './BaseServiceContainer.js';
+import { DesignContext } from '../widgets/designerView/DesignContext.js';
+export class InstanceServiceContainer extends BaseServiceContainer {
+    designContext = new DesignContext();
+    designerCanvas;
+    designer; //usable to assign designer from outside
+    constructor(designerCanvas) {
+        super();
+        this.designerCanvas = designerCanvas;
+    }
+    get undoService() {
+        return this.getLastService('undoService');
+    }
+    get selectionService() {
+        return this.getLastService('selectionService');
+    }
+    get contentService() {
+        return this.getLastService('contentService');
+    }
+    get stylesheetService() {
+        return this.getLastService('stylesheetService');
+    }
+    get designItemDocumentPositionService() {
+        return this.getLastService('designItemDocumentPositionService');
+    }
+}