@node-projects/web-component-designer-zpl 0.1.21 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IDesignerCanvas, IExternalDragDropService } from "@node-projects/web-component-designer";
|
|
2
2
|
export declare class ZplImageDrop implements IExternalDragDropService {
|
|
3
|
-
dragOver(event: DragEvent): 'none' | 'copy' | 'link' | 'move';
|
|
4
|
-
drop(
|
|
3
|
+
dragOver(designerCanvas: IDesignerCanvas, event: DragEvent): 'none' | 'copy' | 'link' | 'move';
|
|
4
|
+
drop(designerCanvas: IDesignerCanvas, event: DragEvent): void;
|
|
5
5
|
private _convertImage;
|
|
6
6
|
private _imageToACS;
|
|
7
7
|
private _rgbaToACS;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { DesignItem, InsertAction } from "@node-projects/web-component-designer";
|
|
2
2
|
import { ZplImage } from "../widgets/zpl-image.js";
|
|
3
3
|
export class ZplImageDrop {
|
|
4
|
-
dragOver(event) {
|
|
4
|
+
dragOver(designerCanvas, event) {
|
|
5
5
|
if (event.dataTransfer.items[0].type.startsWith('image/'))
|
|
6
6
|
return 'copy';
|
|
7
7
|
return 'none';
|
|
8
8
|
}
|
|
9
|
-
drop(
|
|
9
|
+
drop(designerCanvas, event) {
|
|
10
10
|
if (event.dataTransfer.files[0].type.startsWith('image/')) {
|
|
11
11
|
let name = event.dataTransfer.files[0].name;
|
|
12
12
|
let reader = new FileReader();
|
|
@@ -17,8 +17,8 @@ export class ZplImageDrop {
|
|
|
17
17
|
let zplImage = new ZplImage();
|
|
18
18
|
let zpl = this._convertImage(img, name);
|
|
19
19
|
const targetRect = event.target.getBoundingClientRect();
|
|
20
|
-
let x = event.offsetX + targetRect.left -
|
|
21
|
-
let y = event.offsetY + targetRect.top -
|
|
20
|
+
let x = event.offsetX + targetRect.left - designerCanvas.containerBoundingRect.x + 'px';
|
|
21
|
+
let y = event.offsetY + targetRect.top - designerCanvas.containerBoundingRect.y + 'px';
|
|
22
22
|
zplImage.style.position = "absolute";
|
|
23
23
|
zplImage.style.left = x;
|
|
24
24
|
zplImage.style.top = y;
|
|
@@ -28,11 +28,11 @@ export class ZplImageDrop {
|
|
|
28
28
|
zplImage.setAttribute("hex-image", zpl.hexData);
|
|
29
29
|
zplImage.setAttribute("scale-x", "1");
|
|
30
30
|
zplImage.setAttribute("scale-y", "1");
|
|
31
|
-
const di = DesignItem.createDesignItemFromInstance(zplImage,
|
|
31
|
+
const di = DesignItem.createDesignItemFromInstance(zplImage, designerCanvas.serviceContainer, designerCanvas.instanceServiceContainer);
|
|
32
32
|
let grp = di.openGroup("Insert of <img>");
|
|
33
|
-
|
|
33
|
+
designerCanvas.instanceServiceContainer.undoService.execute(new InsertAction(designerCanvas.rootDesignItem, designerCanvas.rootDesignItem.childCount, di));
|
|
34
34
|
grp.commit();
|
|
35
|
-
requestAnimationFrame(() =>
|
|
35
|
+
requestAnimationFrame(() => designerCanvas.instanceServiceContainer.selectionService.setSelectedElements([di]));
|
|
36
36
|
};
|
|
37
37
|
};
|
|
38
38
|
reader.readAsDataURL(event.dataTransfer.files[0]);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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,
|
|
1
|
+
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, SelectionService, UndoService, GrayOutDragOverContainerExtensionProvider, ElementAtPointService, SnaplinesProviderService, DefaultInstanceService, PropertyGroupsService, DesignItemDocumentPositionService, DragDropService, BaseCustomWebComponentPropertiesService, DefaultEditorTypesService, TransformToolButtonProvider, DesignItemService, DeletionService } from '@node-projects/web-component-designer';
|
|
2
2
|
import { ZplLayoutPlacementService } from './services/ZplLayoutPlacementService.js';
|
|
3
3
|
import { ZplParserService } from './services/ZplParserService.js';
|
|
4
4
|
import { ZplImageDrop } from './services/ZplImageDrop.js';
|
|
@@ -25,7 +25,6 @@ export function createZplDesignerServiceContainer() {
|
|
|
25
25
|
serviceContainer.register("deletionService", new DeletionService());
|
|
26
26
|
serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
|
|
27
27
|
serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));
|
|
28
|
-
serviceContainer.register("contentService", (designerCanvas) => new ContentService(designerCanvas.rootDesignItem));
|
|
29
28
|
serviceContainer.register("designItemDocumentPositionService", (designerCanvas) => new DesignItemDocumentPositionService(designerCanvas));
|
|
30
29
|
serviceContainer.designerExtensions.set(ExtensionType.Permanent, []);
|
|
31
30
|
serviceContainer.designerExtensions.set(ExtensionType.PrimarySelection, [
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
|
|
2
2
|
import { IUiCommand, InstanceServiceContainer, ServiceContainer } from '@node-projects/web-component-designer';
|
|
3
|
-
import { IDemoView } from '@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView';
|
|
3
|
+
import { IDemoView } from '@node-projects/web-component-designer/src/elements/widgets/demoView/IDemoView.js';
|
|
4
4
|
export declare class ZplDemoView extends BaseCustomWebComponentConstructorAppend implements IDemoView {
|
|
5
5
|
static readonly template: HTMLTemplateElement;
|
|
6
6
|
static readonly style: CSSStyleSheet;
|
|
@@ -23,7 +23,7 @@ export class ZplDemoView extends BaseCustomWebComponentConstructorAppend {
|
|
|
23
23
|
const width = 4;
|
|
24
24
|
const height = 6;
|
|
25
25
|
const dpmm = '24dpmm';
|
|
26
|
-
const response = await fetch(`
|
|
26
|
+
const response = await fetch(`https://api.labelary.com/v1/printers/${dpmm}/labels/${width}x${height}/${0}`, {
|
|
27
27
|
method: "POST",
|
|
28
28
|
body: code,
|
|
29
29
|
headers: {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "web-component-designer addon: Widgets and Services for creating a ZPL Designer",
|
|
3
3
|
"name": "@node-projects/web-component-designer-zpl",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@node-projects/base-custom-webcomponent": ">=0.27.8",
|
|
17
|
-
"@node-projects/web-component-designer": ">=0.
|
|
17
|
+
"@node-projects/web-component-designer": ">=0.2.0",
|
|
18
18
|
"jsbarcode": "^3.11.6"
|
|
19
19
|
},
|
|
20
20
|
"repository": {
|