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

package/dist/setupZplServiceContainer.js

@@ -1,4 +1,4 @@
-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 { 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, DeletionService } from '@node-projects/web-component-designer';
 import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js';
 import { ZplParserService } from './services/ZplParserService.js';
 import { ZplImageDrop } from './services/ZplImageDrop.js';
@@ -22,6 +22,7 @@ export function createZplDesignerServiceContainer() {
     serviceContainer.register("propertyGroupsService", new PropertyGroupsService());
     serviceContainer.register("propertyService", new BaseCustomWebComponentPropertiesService(true));
     serviceContainer.register("designItemService", new DesignItemService());
+    serviceContainer.register("deletionService", new DeletionService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
     serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));

package/dist/widgets/views/zpl-demo-view.js

@@ -1,6 +1,6 @@
 import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
 export class ZplDemoView extends BaseCustomWebComponentConstructorAppend {
-    static template = html `<iframe id="iframe"></iframe>`;
+    static template = html `<h2>Label generated via http://api.labelary.com/</h2><br><img id="image">`;
     static style = css `
         :host {
             display: block;
@@ -10,9 +10,8 @@ export class ZplDemoView extends BaseCustomWebComponentConstructorAppend {
             width: 100%;
             position: relative;
         }
-        iframe {
-            height: 100%;
-            width: 100%;
+        #image {
+            border: solid 1px black;
         }`;
     constructor() {
         super();
@@ -21,8 +20,19 @@ export class ZplDemoView extends BaseCustomWebComponentConstructorAppend {
     canExecuteCommand;
     dispose() { }
     async display(serviceContainer, instanceServiceContainer, code, style) {
-        const url = "https://labelary.com/viewer.html?zpl=" + encodeURIComponent(code);
-        this._getDomElement('iframe').src = url;
+        const width = 4;
+        const height = 6;
+        const dpmm = '24dpmm';
+        const response = await fetch(`http://api.labelary.com/v1/printers/${dpmm}/labels/${width}x${height}/${0}`, {
+            method: "POST",
+            body: code,
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'Accept': 'image/png'
+            },
+        });
+        this._getDomElement('image').src = URL.createObjectURL(await response.blob());
+        ;
     }
 }
 customElements.define('node-projects-zpl-demo-view', ZplDemoView);

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.19",
+  "version": "0.1.21",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@node-projects/base-custom-webcomponent": ">=0.27.8",
-    "@node-projects/web-component-designer": ">=0.1.224",
+    "@node-projects/web-component-designer": ">=0.1.247",
     "jsbarcode": "^3.11.6"
   },
   "repository": {