@node-projects/web-component-designer 0.0.34 → 0.0.35

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -43,6 +43,7 @@ import { SnaplinesProviderService } from './placementService/SnaplinesProviderSe
 import { PrepareElementsForDesignerService } from './instanceService/PrepareElementsForDesignerService';
 import { DragDropService } from './dragDropService/DragDropService';
 import { EditTextExtensionProvider } from '../widgets/designerView/extensions/EditText/EditTextExtensionProvider.js';
+import { CopyPasteService } from './copyPasteService/CopyPasteService';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     serviceContainer.register("propertyService", new PolymerPropertiesService());
@@ -61,6 +62,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("elementAtPointService", new ElementAtPointService());
     serviceContainer.register("prepareElementsForDesignerService", new PrepareElementsForDesignerService());
     serviceContainer.register("dragDropService", new DragDropService());
+    serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, [
         new ResizeExtensionProvider(false),
         new InvisibleDivExtensionProvider()

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

@@ -20,6 +20,7 @@ import { IElementAtPointService } from './elementAtPointService/IElementAtPointS
 import { ISnaplinesProviderService } from "./placementService/ISnaplinesProviderService.js";
 import { IPrepareElementsForDesignerService } from './instanceService/IPrepareElementsForDesignerService';
 import { IDragDropService } from './dragDropService/IDragDropService';
+import { ICopyPasteService } from "./copyPasteService/ICopyPasteService.js";
 interface ServiceNameMap {
     "propertyService": IPropertiesService;
     "containerService": IPlacementService;
@@ -34,6 +35,7 @@ interface ServiceNameMap {
     "elementAtPointService": IElementAtPointService;
     "prepareElementsForDesignerService": IPrepareElementsForDesignerService;
     "dragDropService": IDragDropService;
+    "copyPasteService": ICopyPasteService;
 }
 export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMap> {
     readonly config: {
@@ -57,5 +59,6 @@ export declare class ServiceContainer extends BaseServiceContainer<ServiceNameMa
     get elementAtPointService(): IElementAtPointService;
     get prepareElementsForDesignerService(): IPrepareElementsForDesignerService;
     get dragDropService(): IDragDropService;
+    get copyPasteService(): ICopyPasteService;
 }
 export {};

package/dist/elements/services/ServiceContainer.js

@@ -52,4 +52,7 @@ export class ServiceContainer extends BaseServiceContainer {
     get dragDropService() {
         return this.getLastService('dragDropService');
     }
+    get copyPasteService() {
+        return this.getLastService('copyPasteService');
+    }
 }

package/dist/elements/services/copyPasteService/CopyPasteService.d.ts

@@ -0,0 +1,8 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { ICopyPasteService } from "./ICopyPasteService.js";
+import { ServiceContainer } from '../ServiceContainer';
+import { InstanceServiceContainer } from '../InstanceServiceContainer';
+export declare class CopyPasteService implements ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+}

package/dist/elements/services/copyPasteService/CopyPasteService.js

@@ -0,0 +1,12 @@
+import { DomConverter } from "../../widgets/designerView/DomConverter.js";
+export class CopyPasteService {
+    async copyItems(designItems) {
+        const copyText = DomConverter.ConvertToString(designItems, null);
+        await navigator.clipboard.writeText(copyText);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        const text = await navigator.clipboard.readText();
+        const parserService = serviceContainer.htmlParserService;
+        return await parserService.parse(text, serviceContainer, instanceServiceContainer);
+    }
+}

package/dist/elements/services/copyPasteService/ICopyPasteService copy.js

@@ -0,0 +1 @@
+"use strict";

package/dist/elements/services/copyPasteService/ICopyPasteService.d.ts

@@ -0,0 +1,7 @@
+import { IDesignItem } from "../../item/IDesignItem.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+export interface ICopyPasteService {
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
+}

package/dist/elements/services/copyPasteService/ICopyPasteService.js

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

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

@@ -50,7 +50,7 @@ export declare class DesignerCanvas extends BaseCustomWebComponentLazyAppend imp
     executeCommand(command: IUiCommand): Promise<void>;
     canExecuteCommand(command: IUiCommand): boolean;
     handleSelectAll(): void;
-    handleCopyCommand(): void;
+    handleCopyCommand(): Promise<void>;
     handlePasteCommand(): Promise<void>;
     handleDeleteCommand(): void;
     handleMoveCommand(command: CommandType): void;

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

@@ -7,7 +7,6 @@ import { BaseCustomWebComponentLazyAppend, css, html } from '@node-projects/base
 import { dragDropFormatName } from '../../../Constants';
 import { ContentService } from '../../services/contentService/ContentService';
 import { InsertAction } from '../../services/undoService/transactionItems/InsertAction';
-import { DomConverter } from './DomConverter';
 import { Snaplines } from './Snaplines';
 import { ContextMenuHelper } from '../../helper/contextMenu/ContextMenuHelper';
 import { DeleteAction } from '../../services/undoService/transactionItems/DeleteAction';
@@ -155,15 +154,12 @@ export class DesignerCanvas extends BaseCustomWebComponentLazyAppend {
     handleSelectAll() {
         this.instanceServiceContainer.selectionService.setSelectedElements(Array.from(this.rootDesignItem.children()));
     }
-    handleCopyCommand() {
-        const copyText = DomConverter.ConvertToString(this.instanceServiceContainer.selectionService.selectedElements, null);
-        navigator.clipboard.writeText(copyText);
+    async handleCopyCommand() {
+        await this.serviceContainer.copyPasteService.copyItems(this.instanceServiceContainer.selectionService.selectedElements);
     }
     async handlePasteCommand() {
-        const text = await navigator.clipboard.readText();
-        const parserService = this.serviceContainer.htmlParserService;
+        const designItems = await this.serviceContainer.copyPasteService.getPasteItems(this.serviceContainer, this.instanceServiceContainer);
         let grp = this.rootDesignItem.openGroup("Insert");
-        const designItems = await parserService.parse(text, this.serviceContainer, this.instanceServiceContainer);
         if (designItems) {
             for (let di of designItems) {
                 this.instanceServiceContainer.undoService.execute(new InsertAction(this.rootDesignItem, this.rootDesignItem.childCount, di));

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

@@ -66,8 +66,7 @@ OverlayLayerView.style = css `
     }
 
     .svg-snapline { stroke: purple; stroke-dasharray: 4; fill: transparent; }
-    /*.svg-selection { stroke: #3899ec; fill: transparent; stroke-width: 2; }*/
-    .svg-selector { stroke: black; fill: transparent; stroke-width: 1; stroke-dasharray: 2; }
+    .svg-selector { stroke: black; fill: #3899ec55; stroke-width: 1; stroke-dasharray: 2; }
     .svg-primary-selection-move { stroke: #3899ec; fill: #3899ec; cursor: move; pointer-events: all }
     .svg-text { stroke: none; fill: white; stroke-width: 1; font-size: 10px; font-family: monospace; }
     .svg-primary-resizer { stroke: #3899ec; fill: white; pointer-events: all }

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

@@ -53,17 +53,17 @@ export class RectangleSelectorTool {
                     let elementRect = e.getBoundingClientRect();
                     point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
                     point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p1 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
+                    const p1 = this._rect.isPointInFill(point);
                     point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
                     point.y = elementRect.top - designerCanvas.containerBoundingRect.top;
-                    const p2 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
+                    const p2 = p1 && this._rect.isPointInFill(point);
                     point.x = elementRect.left - designerCanvas.containerBoundingRect.left;
                     point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p3 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
+                    const p3 = p2 && this._rect.isPointInFill(point);
                     point.x = elementRect.left - designerCanvas.containerBoundingRect.left + elementRect.width;
                     point.y = elementRect.top - designerCanvas.containerBoundingRect.top + elementRect.height;
-                    const p4 = this._rect.isPointInFill(point) || this._rect.isPointInStroke(point);
-                    if (p1 && p2 && p3 && p4) {
+                    const p4 = p3 && this._rect.isPointInFill(point);
+                    if (p4) {
                         const desItem = DesignItem.GetOrCreateDesignItem(e, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
                         inSelectionElements.push(desItem);
                     }

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export type { IElementAtPointService } from "./elements/services/elementAtPointS
 export * from "./elements/services/contentService/ContentService.js";
 export type { IContentChanged } from "./elements/services/contentService/IContentChanged.js";
 export type { IContentService } from "./elements/services/contentService/IContentService.js";
+export * from "./elements/services/copyPasteService/CopyPasteService.js";
+export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export type { IDragDropService } from "./elements/services/dragDropService/IDragDropService.js";
 export type { IElementDefinition } from "./elements/services/elementsService/IElementDefinition.js";

package/dist/index.js

@@ -20,6 +20,7 @@ export * from "./elements/services/placementService/GridPlacementService.js";
 export * from "./elements/services/placementService/SnaplinesProviderService.js";
 export * from "./elements/services/elementAtPointService/ElementAtPointService.js";
 export * from "./elements/services/contentService/ContentService.js";
+export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/dragDropService/DragDropService.js";
 export * from "./elements/services/elementsService/JsonFileElementsService.js";
 export * from "./elements/services/htmlWriterService/HtmlWriterService.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",