@node-projects/web-component-designer-zpl 0.1.11 → 0.1.13

package/dist/services/ZplParserService.js

@@ -5,6 +5,7 @@ import { ZplGraphicDiagonalLine } from "../widgets/zpl-graphic-diagonal-line.js"
 import { ZplGraphicCircle } from "../widgets/zpl-graphic-circle.js";
 import { ZplText } from "../widgets/zpl-text.js";
 import { ZplImage } from "../widgets/zpl-image.js";
+import { ZplComment } from "../widgets/zpl-comment.js";
 function getSetValue(...args) {
     for (let a of args)
         if (a != '' && a != null && a != "NaN")
@@ -52,7 +53,14 @@ export class ZplParserService {
             switch (command) {
                 case "XA":
                 case "XZ":
+                    break;
                 case "FX":
+                    let comment = new ZplComment();
+                    comment.style.position = "absolute";
+                    comment.style.left = x + "px";
+                    comment.style.top = y + "px";
+                    comment.setAttribute("content", fieldString);
+                    designItems.push(DesignItem.createDesignItemFromInstance(comment, serviceContainer, instanceServiceContainer));
                     break;
                 case "CF":
                     fontName = fields[0];
@@ -159,7 +167,7 @@ export class ZplParserService {
                         text.setAttribute("font-name", fontName);
                         text.setAttribute("font-height", fontHeight.toString());
                         text.setAttribute("font-width", fontWidth.toString());
-                        text.setAttribute("content", fields[0]);
+                        text.setAttribute("content", fieldString);
                         designItems.push(DesignItem.createDesignItemFromInstance(text, serviceContainer, instanceServiceContainer));
                     }
                     break;
@@ -198,7 +206,6 @@ export class ZplParserService {
         }
         tx += "^XZ";
         textWriter.writeLine("^XA");
-        textWriter.writeLine("^FX Comment for printersettings");
         // textWriter.writeLine("^FX For better view visit http://labelary.com/viewer.html?zpl=" + encodeURIComponent(tx));
         for (let d of designItems) {
             let start = textWriter.position;

package/dist/widgets/zpl-comment.d.ts

@@ -0,0 +1,13 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+export declare class ZplComment extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static readonly is = "zpl-comment";
+    content: string;
+    static readonly properties: {
+        content: StringConstructor;
+    };
+    constructor();
+    ready(): Promise<void>;
+    createZpl(): string;
+}

package/dist/widgets/zpl-comment.js

@@ -0,0 +1,26 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class ZplComment extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    :host {
+        display: none;
+    }`;
+    static template = html ``;
+    static is = 'zpl-comment';
+    content;
+    static properties = {
+        content: String
+    };
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+    }
+    async ready() {
+        this._parseAttributesToProperties();
+    }
+    createZpl() {
+        let zpl = "";
+        zpl += "^FX" + this.content;
+        return zpl;
+    }
+}
+customElements.define(ZplComment.is, ZplComment);

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,69 @@
+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);

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.11",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",