@node-projects/web-component-designer-zpl 0.1.17 → 0.1.19

package/dist/services/ZplLayoutPlacementService.d.ts

@@ -1,10 +1,9 @@
-import { DefaultPlacementService, IDesignItem, IPoint } from '@node-projects/web-component-designer';
-import { IPlacementView } from '@node-projects/web-component-designer/dist/elements/widgets/designerView/IPlacementView';
+import { DefaultPlacementService, IDesignItem, IDesignerCanvas, IPoint } from '@node-projects/web-component-designer';
 export declare class ZplLayoutPlacementService extends DefaultPlacementService {
     constructor();
     serviceForContainer(container: IDesignItem): boolean;
     canEnter(container: IDesignItem, items: IDesignItem[]): boolean;
     enterContainer(container: IDesignItem, items: IDesignItem[]): void;
     leaveContainer(container: IDesignItem, items: IDesignItem[]): void;
-    finishPlace(event: MouseEvent, placementView: IPlacementView, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
+    finishPlace(event: MouseEvent, designerCanvas: IDesignerCanvas, container: IDesignItem, startPoint: IPoint, offsetInControl: IPoint, newPoint: IPoint, items: IDesignItem[]): void;
 }

package/dist/services/ZplLayoutPlacementService.js

@@ -17,9 +17,9 @@ export class ZplLayoutPlacementService extends DefaultPlacementService {
     }
     leaveContainer(container, items) {
     }
-    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+    finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items) {
         {
-            super.finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+            super.finishPlace(event, designerCanvas, container, startPoint, offsetInControl, newPoint, items);
         }
     }
 }

package/dist/setupZplServiceContainer.js

@@ -1,4 +1,4 @@
-import { ExtensionType, DefaultModelCommandService, DefaultHtmlParserService, JsonFileElementsService, ServiceContainer, CanvasExtensionProvider, PositionExtensionProvider, SelectionDefaultExtensionProvider, GrayOutExtensionProvider, AltToEnterContainerExtensionProvider, NamedTools, PointerTool, RectangleSelectorTool, ZoomTool, PanTool, MagicWandSelectorTool, ZMoveContextMenu, CopyPasteContextMenu, MultipleItemsSelectedContextMenu, ItemsBelowContextMenu, ElementDragTitleExtensionProvider, PointerToolButtonProvider, SeperatorToolProvider, SelectorToolButtonProvider, ZoomToolButtonProvider, HighlightElementExtensionProvider, ContentService, SelectionService, UndoService, GrayOutDragOverContainerExtensionProvider, ElementAtPointService, SnaplinesProviderService, DefaultInstanceService, PropertyGroupsService, DesignItemDocumentPositionService, DragDropService, BaseCustomWebComponentPropertiesService, DefaultEditorTypesService, TransformToolButtonProvider } from '@node-projects/web-component-designer';
+import { ExtensionType, DefaultModelCommandService, DefaultHtmlParserService, JsonFileElementsService, ServiceContainer, PositionExtensionProvider, SelectionDefaultExtensionProvider, GrayOutExtensionProvider, AltToEnterContainerExtensionProvider, NamedTools, PointerTool, RectangleSelectorTool, ZoomTool, PanTool, MagicWandSelectorTool, ZMoveContextMenu, CopyPasteContextMenu, MultipleItemsSelectedContextMenu, ItemsBelowContextMenu, ElementDragTitleExtensionProvider, PointerToolButtonProvider, SeperatorToolProvider, SelectorToolButtonProvider, ZoomToolButtonProvider, HighlightElementExtensionProvider, ContentService, SelectionService, UndoService, GrayOutDragOverContainerExtensionProvider, ElementAtPointService, SnaplinesProviderService, DefaultInstanceService, PropertyGroupsService, DesignItemDocumentPositionService, DragDropService, BaseCustomWebComponentPropertiesService, DefaultEditorTypesService, TransformToolButtonProvider, DesignItemService } from '@node-projects/web-component-designer';
 import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js';
 import { ZplParserService } from './services/ZplParserService.js';
 import { ZplImageDrop } from './services/ZplImageDrop.js';
@@ -21,6 +21,7 @@ export function createZplDesignerServiceContainer() {
     serviceContainer.register('editorTypesService', new DefaultEditorTypesService());
     serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
     serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService(true));
+    serviceContainer.register("designItemService", new DesignItemService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
@@ -28,7 +29,6 @@ export function createZplDesignerServiceContainer() {
     serviceContainer.designerExtensions.set(ExtensionType.Permanent, []);
     serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
         new ElementDragTitleExtensionProvider(),
-        new CanvasExtensionProvider(),
         new PositionExtensionProvider(),
         new ZplLayoutResizeExtensionProvider(true)
     ]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon: Widgets and Services for creating a ZPL Designer",
   "name": "@node-projects/web-component-designer-zpl",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -9,11 +9,12 @@
   "scripts": {
     "tsc": "tsc",
     "build": "tsc",
+    "link": "npm link",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@node-projects/base-custom-webcomponent": ">=0.19.0",
-    "@node-projects/web-component-designer": ">=0.1.1",
+    "@node-projects/base-custom-webcomponent": ">=0.27.8",
+    "@node-projects/web-component-designer": ">=0.1.224",
     "jsbarcode": "^3.11.6"
   },
   "repository": {

package/dist/extensions/monaco/ZplLanguage.d.ts

@@ -1 +0,0 @@
-export declare function addZplLanguageToMonaco(monaco: any): void;

package/dist/extensions/monaco/ZplLanguage.js

@@ -1,28 +0,0 @@
-export function addZplLanguageToMonaco(monaco) {
-    //@ts-ignore
-    monaco.languages.register({ id: "zplLanguage" });
-    //@ts-ignore
-    monaco.languages.setMonarchTokensProvider("zplLanguage", {
-        tokenizer: {
-            root: [
-                // lookbehind seems not to work - [/(?<=\^FD)[^\^]*/, "text"],
-                [/\^FX[^\^]*/, "comment"],
-                [/\^FD[^\^]*/, "text"],
-                [/\^../, "command"],
-            ],
-        },
-    });
-    //@ts-ignore
-    monaco.editor.defineTheme("zplTheme", {
-        base: "vs",
-        inherit: false,
-        rules: [
-            { token: "text", foreground: "999999" },
-            { token: "comment", foreground: "008000" },
-            { token: "command", foreground: "0000FF", fontStyle: "bold" },
-        ],
-        colors: {
-            "editor.foreground": "#000000",
-        },
-    });
-}

package/dist/widgets/zpl-text copy.d.ts

@@ -1,25 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-declare enum FontNames {
-    Font_0 = "0",
-    Font_A = "A"
-}
-export declare class ZplText extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    static readonly is = "zpl-text";
-    content: string;
-    fontName: string;
-    fontHeight: number;
-    fontWidth: number;
-    private _text;
-    static readonly properties: {
-        content: StringConstructor;
-        fontName: typeof FontNames;
-        fontHeight: NumberConstructor;
-        fontWidth: NumberConstructor;
-    };
-    constructor();
-    ready(): Promise<void>;
-    createZpl(): string;
-}
-export {};

package/dist/widgets/zpl-text copy.js

@@ -1,69 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
-import { getZplCoordinates } from "../zplHelper.js";
-var FontNames;
-(function (FontNames) {
-    FontNames["Font_0"] = "0";
-    FontNames["Font_A"] = "A";
-})(FontNames || (FontNames = {}));
-export class ZplText extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    *{
-        box-sizing: border-box;
-    }
-    `;
-    static template = html `
-    <div id="text-div" style="width: 100%; height: 100%; pointer-events: none">
-    </div>
-    `;
-    static is = 'zpl-text';
-    content;
-    fontName;
-    fontHeight;
-    fontWidth;
-    _text;
-    static properties = {
-        content: String,
-        fontName: FontNames,
-        fontHeight: Number,
-        fontWidth: Number
-    };
-    constructor() {
-        super();
-        this._restoreCachedInititalValues();
-        this._text = this._getDomElement("text-div");
-    }
-    async ready() {
-        this._parseAttributesToProperties();
-        this._text.innerHTML = this.content;
-        this._text.style.transformOrigin = "0 0";
-        switch (this.fontName) {
-            case FontNames.Font_0:
-                this._text.style.fontSize = "9px";
-                this._text.style.fontFamily = "RobotoCn, Verdana";
-                this._text.style.fontKerning = "none";
-                this._text.style.transform = "scaleX(" + this.fontWidth / 9 + ") scaleY(" + this.fontHeight / 9 + ") translate(0px, -3px)";
-                break;
-            case FontNames.Font_A:
-                this._text.style.fontSize = "9px";
-                this._text.style.fontFamily = "monospace";
-                this._text.style.transform = "scaleX(" + this.fontWidth / 5 + ") scaleY(" + this.fontHeight / 8 + ") translate(0px, -3px)";
-                break;
-        }
-        this.style.width = '';
-        this.style.height = '';
-        requestAnimationFrame(() => {
-            let rect = this._text.getBoundingClientRect();
-            this.style.width = rect.width + 'px';
-            this.style.height = rect.height / 2 + 'px';
-        });
-    }
-    createZpl() {
-        let zpl = "";
-        zpl += getZplCoordinates(this, 0);
-        zpl += "^CF" + this.fontName + "," + this.fontHeight + "," + this.fontWidth;
-        zpl += "^FD" + this.content;
-        zpl += "^FS";
-        return zpl;
-    }
-}
-customElements.define(ZplText.is, ZplText);