@node-projects/web-component-designer-zpl 0.1.0

package/dist/services/ZplImageDrop.d.ts

@@ -0,0 +1,10 @@
+import { IDesignerCanvas, IExternalDragDropService } from "@node-projects/web-component-designer";
+export declare class ZplImageDrop implements IExternalDragDropService {
+    dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
+    drop(designerView: IDesignerCanvas, event: DragEvent): void;
+    private _convertImage;
+    private _imageToACS;
+    private _rgbaToACS;
+    private _monochrome;
+    private _normal;
+}

package/dist/services/ZplImageDrop.js

@@ -0,0 +1,220 @@
+import { DesignItem, InsertAction } from "@node-projects/web-component-designer";
+import { ZplImage } from "../widgets/zpl-image.js";
+export class ZplImageDrop {
+    dragOver(event) {
+        if (event.dataTransfer.items[0].type.startsWith('image/'))
+            return 'copy';
+        return 'none';
+    }
+    drop(designerView, event) {
+        if (event.dataTransfer.files[0].type.startsWith('image/')) {
+            let name = event.dataTransfer.files[0].name;
+            let reader = new FileReader();
+            reader.onloadend = () => {
+                const img = document.createElement('img');
+                img.src = reader.result;
+                img.onload = () => {
+                    let zplImage = new ZplImage();
+                    let zpl = this._convertImage(img, name);
+                    const targetRect = event.target.getBoundingClientRect();
+                    let x = event.offsetX + targetRect.left - designerView.containerBoundingRect.x + 'px';
+                    let y = event.offsetY + targetRect.top - designerView.containerBoundingRect.y + 'px';
+                    zplImage.style.position = "absolute";
+                    zplImage.style.left = x;
+                    zplImage.style.top = y;
+                    zplImage.setAttribute("total-bytes", zpl.totalBytes.toString());
+                    zplImage.setAttribute("bytes-per-row", zpl.bytesPerRow.toString());
+                    zplImage.setAttribute("image-name", zpl.name);
+                    zplImage.setAttribute("hex-image", zpl.hexData);
+                    zplImage.setAttribute("scale-x", "1");
+                    zplImage.setAttribute("scale-y", "1");
+                    const di = DesignItem.createDesignItemFromInstance(zplImage, designerView.serviceContainer, designerView.instanceServiceContainer);
+                    let grp = di.openGroup("Insert of <img>");
+                    designerView.instanceServiceContainer.undoService.execute(new InsertAction(designerView.rootDesignItem, designerView.rootDesignItem.childCount, di));
+                    grp.commit();
+                    requestAnimationFrame(() => designerView.instanceServiceContainer.selectionService.setSelectedElements([di]));
+                };
+            };
+            reader.readAsDataURL(event.dataTransfer.files[0]);
+        }
+    }
+    _convertImage(img, name) {
+        let black = 50;
+        let rot = 'N';
+        let notrim = true;
+        // Get the image and convert to Z64
+        let res;
+        res = this._imageToACS(img, { black: black, rotate: rot, notrim: notrim });
+        let imgName = name.split('.')[0].substring(0, 8);
+        let bytesPerRow = res.rowlen;
+        let totalBytes = res.length;
+        return {
+            name: imgName,
+            totalBytes,
+            bytesPerRow,
+            hexData: res.acs
+        };
+    }
+    _imageToACS(img, opts) {
+        // Draw the image to a temp canvas so we can access its RGBA data
+        let cvs = document.createElement('canvas');
+        let ctx = cvs.getContext('2d');
+        cvs.width = +img.width || img.offsetWidth;
+        cvs.height = +img.height || img.offsetHeight;
+        ctx.imageSmoothingQuality = 'high'; // in case canvas needs to scale image
+        ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
+        let pixels = ctx.getImageData(0, 0, cvs.width, cvs.height);
+        return this._rgbaToACS(pixels.data, pixels.width, opts);
+    }
+    _rgbaToACS(rgba, width, opts) {
+        const hexmap = (() => {
+            let arr = Array(256);
+            for (let i = 0; i < 16; i++) {
+                arr[i] = '0' + i.toString(16);
+            }
+            for (let i = 16; i < 256; i++) {
+                arr[i] = i.toString(16);
+            }
+            return arr;
+        })();
+        opts = opts || {};
+        width = width | 0;
+        if (!width || width < 0) {
+            throw new Error('Invalid width');
+        }
+        let height = ~~(rgba.length / width / 4);
+        // Create a monochome image, cropped to remove padding.
+        // The return is a Uint8Array with extra properties width and height.
+        let mono = this._monochrome(rgba, width, height, +opts.black || 50, opts.notrim);
+        let buf = this._normal(mono);
+        // Encode in hex and apply the "Alternative Data Compression Scheme"
+        //
+        //      G   H   I   J   K   L   M   N   O   P   Q   R   S   T   U   V   W   X   Y
+        //      1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19
+        //
+        //      g   h   i   j   k   l   m   n   o   p   q   r   s   t   u   v   w   x   y   z   
+        //     20  40  60  80 100 120 140 160 180 200 220 240 260 280 300 320 340 360 380 400
+        //
+        let imgw = buf.width;
+        let imgh = buf.height;
+        let rowl = ~~((imgw + 7) / 8);
+        let hex = '';
+        for (let i = 0, l = buf.length; i < l; i++) {
+            hex += hexmap[buf[i]];
+        }
+        let acs = '';
+        let re = /([0-9a-fA-F])\1{2,}/g;
+        let match = re.exec(hex);
+        let offset = 0;
+        while (match) {
+            acs += hex.substring(offset, match.index);
+            let l = match[0].length;
+            while (l >= 400) {
+                acs += 'z';
+                l -= 400;
+            }
+            if (l >= 20) {
+                acs += '_ghijklmnopqrstuvwxy'[((l / 20) | 0)];
+                l = l % 20;
+            }
+            if (l) {
+                acs += '_GHIJKLMNOPQRSTUVWXY'[l];
+            }
+            acs += match[1];
+            offset = re.lastIndex;
+            match = re.exec(hex);
+        }
+        acs += hex.substr(offset);
+        // Example usage of the return value `rv`:
+        //		'^GFA,' + rv.length + ',' + rv.length + ',' + rv.rowlen + ',' + rv.acs
+        return {
+            length: buf.length, // uncompressed number of bytes
+            rowlen: rowl, // number of packed bytes per row
+            width: imgw, // rotated image width in pixels
+            height: imgh, // rotated image height in pixels
+            acs: acs,
+        };
+    }
+    _monochrome(rgba, width, height, black, notrim) {
+        // Convert black from percent to 0..255 value
+        black = 255 * black / 100;
+        let minx, maxx, miny, maxy;
+        if (notrim) {
+            minx = miny = 0;
+            maxx = width - 1;
+            maxy = height - 1;
+        }
+        else {
+            // Run through the image and determine bounding box
+            maxx = maxy = 0;
+            minx = width;
+            miny = height;
+            let x = 0, y = 0;
+            for (let i = 0, n = width * height * 4; i < n; i += 4) {
+                // Alpha blend with white.
+                let a = rgba[i + 3] / 255;
+                let r = rgba[i] * .3 * a + 255 * (1 - a);
+                let g = rgba[i + 1] * .59 * a + 255 * (1 - a);
+                let b = rgba[i + 2] * .11 * a + 255 * (1 - a);
+                let gray = r + g + b;
+                if (gray <= black) {
+                    if (minx > x)
+                        minx = x;
+                    if (miny > y)
+                        miny = y;
+                    if (maxx < x)
+                        maxx = x;
+                    if (maxy < y)
+                        maxy = y;
+                }
+                if (++x == width) {
+                    x = 0;
+                    y++;
+                }
+            }
+        }
+        // One more time through the data, this time we create the cropped image.
+        let cx = maxx - minx + 1;
+        let cy = maxy - miny + 1;
+        let buf = new Uint8Array(cx * cy);
+        let idx = 0;
+        for (let y = miny; y <= maxy; y++) {
+            let i = (y * width + minx) * 4;
+            for (let x = minx; x <= maxx; x++) {
+                // Alpha blend with white.
+                let a = rgba[i + 3] / 255;
+                let r = rgba[i] * .3 * a + 255 * (1 - a);
+                let g = rgba[i + 1] * .59 * a + 255 * (1 - a);
+                let b = rgba[i + 2] * .11 * a + 255 * (1 - a);
+                let gray = r + g + b;
+                buf[idx++] = gray <= black ? 1 : 0;
+                i += 4;
+            }
+        }
+        // Return the monochrome image
+        buf.width = cx;
+        buf.height = cy;
+        return buf;
+    }
+    _normal(mono) {
+        let width = mono.width;
+        let height = mono.height;
+        let buf = new Uint8Array(~~((width + 7) / 8) * height);
+        let idx = 0; // index into buf
+        let byte = 0; // current byte of image data
+        let bitx = 0; // bit index
+        for (let i = 0, n = mono.length; i < n; i++) {
+            byte |= mono[i] << (7 - (bitx++ & 7));
+            if (bitx == width || !(bitx & 7)) {
+                buf[idx++] = byte;
+                byte = 0;
+                if (bitx == width) {
+                    bitx = 0;
+                }
+            }
+        }
+        buf.width = width;
+        buf.height = height;
+        return buf;
+    }
+}

package/dist/services/ZplLayoutCopyPasteService.d.ts

@@ -0,0 +1,6 @@
+import { ICopyPasteService, IDesignItem, InstanceServiceContainer, ServiceContainer, IRect } from '@node-projects/web-component-designer';
+export declare class ZplLayoutCopyPasteService implements ICopyPasteService {
+    constructor();
+    copyItems(designItems: IDesignItem[]): Promise<void>;
+    getPasteItems(serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<[designItems: IDesignItem[], positions?: IRect[]]>;
+}

package/dist/services/ZplLayoutCopyPasteService.js

@@ -0,0 +1,19 @@
+import { getTextFromClipboard, copyTextToClipboard, DefaultHtmlParserService } from '@node-projects/web-component-designer';
+export class ZplLayoutCopyPasteService {
+    constructor() {
+    }
+    async copyItems(designItems) {
+        let savedata = "";
+        for (let d of designItems) {
+            savedata += d.element.outerHTML;
+        }
+        await copyTextToClipboard(savedata);
+    }
+    async getPasteItems(serviceContainer, instanceServiceContainer) {
+        let result = [];
+        const text = await getTextFromClipboard();
+        let htmlParser = new DefaultHtmlParserService();
+        result = await htmlParser.parse(text, serviceContainer, instanceServiceContainer, true);
+        return [result, null];
+    }
+}

package/dist/services/ZplLayoutPlacementService.d.ts

@@ -0,0 +1,10 @@
+import { DefaultPlacementService, IDesignItem, IPoint } from '@node-projects/web-component-designer';
+import { IPlacementView } from '@node-projects/web-component-designer/dist/elements/widgets/designerView/IPlacementView';
+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;
+}

package/dist/services/ZplLayoutPlacementService.js

@@ -0,0 +1,25 @@
+import { DefaultPlacementService, filterChildPlaceItems } from '@node-projects/web-component-designer';
+export class ZplLayoutPlacementService extends DefaultPlacementService {
+    constructor() {
+        super();
+    }
+    serviceForContainer(container) {
+        return true;
+    }
+    canEnter(container, items) {
+        return false;
+    }
+    enterContainer(container, items) {
+        let filterdItems = filterChildPlaceItems(items);
+        for (let i of filterdItems) {
+            container.insertChild(i);
+        }
+    }
+    leaveContainer(container, items) {
+    }
+    finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items) {
+        {
+            super.finishPlace(event, placementView, container, startPoint, offsetInControl, newPoint, items);
+        }
+    }
+}

package/dist/services/ZplParserService.d.ts

@@ -0,0 +1,6 @@
+import { ITextWriter, IDesignItem, IHtmlParserService, IHtmlWriterOptions, IHtmlWriterService, InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer";
+export declare class ZplParserService implements IHtmlParserService, IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, parseSnippet: boolean): Promise<IDesignItem[]>;
+    write(textWriter: ITextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean, updatePositions?: boolean): void;
+}

package/dist/services/ZplParserService.js

@@ -0,0 +1,213 @@
+import { DesignItem } from "@node-projects/web-component-designer";
+import { ZplBarcode } from "../widgets/zpl-barcode.js";
+import { ZplGraphicBox } from "../widgets/zpl-graphic-box.js";
+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";
+function getSetValue(...args) {
+    for (let a of args)
+        if (a != '' && a != null && a != "NaN")
+            return a;
+}
+export class ZplParserService {
+    options = {};
+    async parse(html, serviceContainer, instanceServiceContainer, parseSnippet) {
+        let parts = html.split("^");
+        let images = {};
+        if (parts[0][0] == "~") {
+            let imgStrings = parts[0].split("~");
+            for (let img of imgStrings) {
+                if (img == "")
+                    continue;
+                let imgParts = img.split(",");
+                images[imgParts[0].substring(2)] = {
+                    name: imgParts[0].substring(2),
+                    totalBytes: parseInt(imgParts[1]),
+                    bytesPerRow: parseInt(imgParts[2]),
+                    hexData: imgParts[3]
+                };
+            }
+        }
+        let designItems = [];
+        let fontName;
+        let fontHeight;
+        let fontWidth;
+        let x;
+        let y;
+        let bc;
+        let qr;
+        let bw;
+        let bh;
+        let br;
+        // let bo: string;
+        let barcode;
+        //let a: number;
+        for (let p of parts) {
+            p = p.replaceAll("\n", "");
+            p = p.replaceAll("\r", "");
+            let command = p.substring(0, 2);
+            let fields = p.substring(2).split(",");
+            switch (command) {
+                case "XA":
+                case "XZ":
+                case "FX":
+                    break;
+                case "CF":
+                    fontName = fields[0];
+                    fontHeight = parseInt(fields[1]);
+                    let defultFontWidth = 15;
+                    switch (fontName) {
+                        case "A":
+                            defultFontWidth = 15;
+                            break;
+                        case "0":
+                            defultFontWidth = fontHeight;
+                    }
+                    fontWidth = parseInt(getSetValue(fields[2], defultFontWidth));
+                    break;
+                case "FO":
+                    x = parseInt(fields[0]);
+                    y = parseInt(fields[1]);
+                    //a = parseInt(fields[2]);
+                    break;
+                case "GB":
+                    let rect = new ZplGraphicBox();
+                    rect.style.position = "absolute";
+                    rect.style.left = x + "px";
+                    rect.style.top = y + "px";
+                    rect.style.width = getSetValue(fields[0], fields[2], '1') + "px";
+                    rect.style.height = getSetValue(fields[1], fields[2], '1') + "px";
+                    rect.setAttribute("stroke-width", getSetValue(fields[2], '1'));
+                    rect.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white");
+                    rect.setAttribute("corner-rounding", getSetValue(fields[4], '0'));
+                    designItems.push(DesignItem.createDesignItemFromInstance(rect, serviceContainer, instanceServiceContainer));
+                    break;
+                case "GD":
+                    let line = new ZplGraphicDiagonalLine();
+                    line.style.position = "absolute";
+                    line.style.left = x + "px";
+                    line.style.top = y + "px";
+                    line.style.width = getSetValue(fields[0], fields[2], '1') + "px";
+                    line.style.height = getSetValue(fields[1], fields[2], '1') + "px";
+                    line.setAttribute("stroke-width", getSetValue(fields[2], '1'));
+                    line.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white");
+                    line.setAttribute("orientation", getSetValue(fields[4], 'R'));
+                    designItems.push(DesignItem.createDesignItemFromInstance(line, serviceContainer, instanceServiceContainer));
+                    break;
+                case "GE":
+                    let circle = new ZplGraphicCircle();
+                    circle.style.position = "absolute";
+                    circle.style.left = x + "px";
+                    circle.style.top = y + "px";
+                    circle.style.width = getSetValue(fields[0], fields[2], '1') + "px";
+                    circle.style.height = getSetValue(fields[1], fields[2], '1') + "px";
+                    circle.setAttribute("stroke-width", getSetValue(fields[2], '1'));
+                    circle.setAttribute("stroke-color", getSetValue(fields[3], 'B') == "B" ? "black" : "white");
+                    designItems.push(DesignItem.createDesignItemFromInstance(circle, serviceContainer, instanceServiceContainer));
+                    break;
+                case "BY":
+                    bw = parseInt(getSetValue(fields[0], "2"));
+                    br = parseFloat(getSetValue(fields[1], "3"));
+                    bh = parseInt(getSetValue(fields[2], "10"));
+                    break;
+                case "BC":
+                    bc = true;
+                    // bo = getSetValue(fields[0], 'N');
+                    barcode = new ZplBarcode();
+                    barcode.style.position = "absolute";
+                    barcode.style.left = x + "px";
+                    barcode.style.top = y + "px";
+                    barcode.setAttribute("type", "CODE128");
+                    if (bw)
+                        barcode.setAttribute("width", bw.toString());
+                    if (br)
+                        barcode.setAttribute("ratio", br.toString());
+                    barcode.setAttribute("height", getSetValue(fields[1], bh).toString());
+                    break;
+                case "BQ":
+                    qr = true;
+                    bc = true;
+                    // bo = getSetValue(fields[0], 'N');
+                    barcode = new ZplBarcode();
+                    barcode.style.position = "absolute";
+                    barcode.style.left = x + "px";
+                    barcode.style.top = y + "px";
+                    barcode.setAttribute("type", "QR");
+                    if (bw)
+                        barcode.setAttribute("width", bw.toString());
+                    if (br)
+                        barcode.setAttribute("ratio", br.toString());
+                    barcode.setAttribute("height", getSetValue(fields[2], bh).toString());
+                    break;
+                case "FD":
+                    if (bc) {
+                        if (qr)
+                            barcode.setAttribute("content", fields[0].substring(3));
+                        else
+                            barcode.setAttribute("content", fields[0]);
+                        designItems.push(DesignItem.createDesignItemFromInstance(barcode, serviceContainer, instanceServiceContainer));
+                        bc = false;
+                        qr = false;
+                    }
+                    else {
+                        let text = new ZplText();
+                        text.style.position = "absolute";
+                        text.style.left = x + "px";
+                        text.style.top = y + "px";
+                        text.setAttribute("font-name", fontName);
+                        text.setAttribute("font-height", fontHeight.toString());
+                        text.setAttribute("font-width", fontWidth.toString());
+                        text.setAttribute("content", fields[0]);
+                        designItems.push(DesignItem.createDesignItemFromInstance(text, serviceContainer, instanceServiceContainer));
+                    }
+                    break;
+                case "XG":
+                    let image = new ZplImage();
+                    let nm = fields[0].substring(2);
+                    image.style.position = "absolute";
+                    image.style.left = x + "px";
+                    image.style.top = y + "px";
+                    image.setAttribute("total-bytes", images[nm].totalBytes.toString());
+                    image.setAttribute("bytes-per-row", images[nm].bytesPerRow.toString());
+                    image.setAttribute("image-name", nm);
+                    image.setAttribute("hex-image", images[nm].hexData);
+                    image.setAttribute("scale-x", getSetValue(fields[1], "1"));
+                    image.setAttribute("scale-y", getSetValue(fields[2], "1"));
+                    designItems.push(DesignItem.createDesignItemFromInstance(image, serviceContainer, instanceServiceContainer));
+                    break;
+            }
+        }
+        return designItems;
+    }
+    write(textWriter, designItems, rootContainerKeepInline, updatePositions) {
+        let tx = "^XA\n";
+        for (let d of designItems) {
+            if (d.element.nodeName == "ZPL-IMAGE") {
+                //@ts-ignore
+                textWriter.writeLine(d.element.createZplImage());
+                //@ts-ignore
+                tx += d.element.createZplImage() + '\n';
+            }
+        }
+        for (let d of designItems) {
+            //@ts-ignore
+            tx += d.element.createZpl();
+            +'\n';
+        }
+        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;
+            //@ts-ignore
+            textWriter.writeLine(d.element.createZpl());
+            let end = textWriter.position;
+            if (updatePositions && d.instanceServiceContainer.designItemDocumentPositionService) {
+                d.instanceServiceContainer.designItemDocumentPositionService.setPosition(d, { start: start, length: end - start });
+            }
+        }
+        textWriter.writeLine("^XZ");
+    }
+}

package/dist/setupZplServiceContainer.d.ts

@@ -0,0 +1,2 @@
+import { ServiceContainer } from '@node-projects/web-component-designer';
+export declare function createZplDesignerServiceContainer(): ServiceContainer;

package/dist/setupZplServiceContainer.js

@@ -0,0 +1,66 @@
+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 } from '@node-projects/web-component-designer';
+import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
+import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js';
+import { ZplParserService } from './services/ZplParserService.js';
+import { ZplImageDrop } from './services/ZplImageDrop';
+import { ZplLayoutCopyPasteService } from './services/ZplLayoutCopyPasteService.js';
+import { ZplLayoutResizeExtensionProvider } from './extensions/ZplLayoutResizeExtensionProvider.js';
+export function createZplDesignerServiceContainer() {
+    let serviceContainer = new ServiceContainer();
+    serviceContainer.register("instanceService", new DefaultInstanceService());
+    serviceContainer.register("containerService", new ZplLayoutPlacementService());
+    serviceContainer.register("snaplinesProviderService", new SnaplinesProviderService());
+    serviceContainer.register("htmlParserService", new DefaultHtmlParserService());
+    serviceContainer.register("htmlParserService", new ZplParserService());
+    serviceContainer.register("htmlWriterService", new ZplParserService());
+    serviceContainer.register("elementAtPointService", new ElementAtPointService());
+    serviceContainer.register("externalDragDropService", new ZplImageDrop());
+    serviceContainer.register("dragDropService", new DragDropService());
+    serviceContainer.register("copyPasteService", new ZplLayoutCopyPasteService());
+    serviceContainer.register("modelCommandService", new DefaultModelCommandService());
+    serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
+    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.config.codeViewWidget = CodeViewMonaco;
+    serviceContainer.designerExtensions.set(ExtensionType.Permanent, []);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
+        new ElementDragTitleExtensionProvider(),
+        new CanvasExtensionProvider(),
+        new PositionExtensionProvider(),
+        new ZplLayoutResizeExtensionProvider(true)
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.Selection, [
+        new SelectionDefaultExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.PrimarySelectionContainer, []);
+    serviceContainer.designerExtensions.set(ExtensionType.MouseOver, [
+        new HighlightElementExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDrag, [
+        new GrayOutExtensionProvider()
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerDragOverAndCanBeEntered, [
+        new AltToEnterContainerExtensionProvider(),
+        new GrayOutDragOverContainerExtensionProvider(),
+    ]);
+    serviceContainer.designerExtensions.set(ExtensionType.ContainerExternalDragOverAndCanBeEntered, [
+        new GrayOutDragOverContainerExtensionProvider(),
+    ]);
+    serviceContainer.designerTools.set(NamedTools.Pointer, new PointerTool());
+    serviceContainer.designerTools.set(NamedTools.DrawSelection, new RectangleSelectorTool());
+    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.designerContextMenuExtensions = [
+        new CopyPasteContextMenu(),
+        new ZMoveContextMenu(),
+        new MultipleItemsSelectedContextMenu(),
+        new ItemsBelowContextMenu()
+    ];
+    serviceContainer.designViewToolbarButtons.push(new PointerToolButtonProvider(), new SeperatorToolProvider(22), new SelectorToolButtonProvider(), new SeperatorToolProvider(22), new ZoomToolButtonProvider());
+    serviceContainer.register('elementsService', new JsonFileElementsService('zpl', '/dist/widgets/elements.json'));
+    return serviceContainer;
+}

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

@@ -0,0 +1,25 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { BarcodeFormat } from "../jsBarcodeOptions.js";
+export declare class ZplBarcode extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static readonly is = "zpl-barcode";
+    content: string;
+    type: BarcodeFormat;
+    width: number;
+    ratio: number;
+    height: number;
+    private _barcode;
+    private _barcodeOptions;
+    static readonly properties: {
+        content: StringConstructor;
+        type: typeof BarcodeFormat;
+        width: NumberConstructor;
+        ratio: NumberConstructor;
+        height: NumberConstructor;
+    };
+    constructor();
+    ready(): Promise<void>;
+    private _createOptions;
+    createZpl(): string;
+}